Skip to content

Commit

Permalink
Ensure Consistent Card Height for Better Presentation. (#105)
Browse files Browse the repository at this point in the history 
<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
This pull request addresses the issue of inconsistent card heights in
the home page section of the website. The changes ensure that all cards
are of the same height and maintain a responsive design for better
presentation.
<!--Please include a brief description of the changes-->


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #103 

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [ X] (Bug)
- [ X] (Enhancement)

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->
<img width="1406" alt="Screenshot 2024-10-02 at 11 51 36 PM"
src="https://github.com/user-attachments/assets/92565512-152c-4da4-bc5b-2d332e9a2805">



## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [ X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X ] I have updated my branch and synced it with project `main` branch
before making this PR
- [X ] I have performed a self-review of my code
- [ X] I have tested the changes thoroughly before submitting this pull
request.
- [X ] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [ X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
The changes leverage flexbox properties to maintain consistent heights
across all cards, allowing for a clean layout on both desktop and mobile
screens. This will improve the user experience and presentation of the
content.
<!--Include any additional information or context that might be helpful
for reviewers.-->
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 3, 2024
2 parents a0756a2 + 4da6b95 commit b220f0a
Showing 1 changed file with 60 additions and 3 deletions.
63 changes: 60 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,62 @@
.moon{
transform-origin: 50% 100%;
}

#about {
display: flex;
flex-wrap: wrap; /* Allow boxes to wrap */
gap: 20px; /* Space between boxes */
justify-content: center; /* Center align items */
}

.box {
background-color:transparent; /* Optional for visual separation */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column; /* Stack content vertically */
align-items: center;
max-width: 350px; /* Maximum width of each card */
flex: 1 1 280px; /* Allow boxes to grow and shrink */
min-width: 300px; /* Minimum width for responsiveness */
min-height: 480px; /* Minimum height for the card */
}

.card-image {
width: auto; /* Set width to auto to allow centering */
height: auto; /* Maintain aspect ratio */
max-width: 100%; /* Ensure image does not exceed card width */
max-height: 200px; /* Limit the max height to prevent overflow */
object-fit: cover; /* Ensure the image covers the card area without distorting */
border-radius: 10px; /* Match border radius of the box */
margin: 0 auto; /* Center the image horizontally */
}

.box h2 {
margin-top: 10px;
text-align: center;
}

p {
text-align: center;
margin: 10px 0; /* Add some margin for spacing */
}

/* Additional responsive adjustments */
@media (max-width: 600px) {
.box {
max-width: 100%; /* Allow full width on small screens */
min-height: auto; /* Allow height to adjust for smaller screens */
}

.card-image {
max-height: 150px; /* Adjust max height for smaller screens */
}
}



</style>
</head>
<body>
Expand Down Expand Up @@ -356,25 +412,26 @@ <h1 class="h-primary center" style="font-family: var(--ff-philosopher);font-size
<!-- changes -->
<div id="about">
<div class="box">
<img src="Images/biryani.jpg" style="height: 300px;border-radius: 10px;" alt="">
<img src="Images/biryani.jpg" alt="Biryani" class="card-image">
<h2 class="h-secondary center" style="font-family:var(--ff-philosopher);">60s-style florals</h2>
<p class="center" style="font-family: var(--ff-poppins);">From aromatic curries to flavorful biryanis, our menu showcases the diversity and
deliciousness of Indian cuisine.
</p>
</div>
<div class="box">
<img src="Images/plate_mismatch.jpg" alt="" style="border-radius: 10px;height: 350px;width: 350px;">
<img src="Images/plate_mismatch.jpg" alt="Plate" class="card-image">
<h2 class="h-secondary center" style="font-family: var(--ff-philosopher)">60's Dinning Items</h2>
<p class="center" style="font-family: var(--ff-poppins);">
Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.
</p>
</div>
<div class="box">
<img src="Images/candy.jpg" alt="Images/bon-bon candy.jpg" style="border-radius: 10px;height: 200px;">
<img src="Images/candy.jpg" alt="Candy" class="card-image">
<h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whimsical Nostalgia: The Stardust Bonbon</h2>
<p class="center" style="font-family: var(--ff-poppins);">The Stardust Bonbon, a sweet relic from an era when the universe was our playground.</p>
</div>
</div>

</section>

<section class="service_container" style="background-color: hsl(20, 43%, 93%);">
Expand Down

0 comments on commit b220f0a

Please sign in to comment.