[Hack-together] Unequal Sizes of Listing Cards on Homepage

[Michael Khanda]

Are you accessing the project from the GitHub Codespaces?

• No, I am running the project on my local machine (I will fill in the OS section below)
• [ Yes ] Yes, I am using GitHub Codespaces.

Note: The project is optimized to run on Codespaces. We welcome contributions to enhance it for cross-platform local development, but it's not something we will prioritize right now. Thank you!

Describe the bug
I've noticed that the listing cards on the project's homepage are displaying with unequal sizes, which is affecting the overall visual consistency of the page. This issue seems to impact both the desktop and mobile versions of the site.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to the homepage of the real estate project.
2. Observe the listing cards in the main content area.
3. Note the varying heights of the listing cards.

Expected behavior
The listing cards should maintain consistent dimensions, ensuring a uniform and visually appealing layout across different devices and screen sizes.

Screenshots

OS (please complete the following information):

• OS: MacOs
• OS Version: Ventura 13.5
• npm version: 9.8.0
• Node.js version: 18.14.0
• output of azd version:

Possible Solution:
To address the issue of unequal listing card sizes, we can implement a JavaScript solution that dynamically adjusts the card sizes to ensure uniformity. Here's how we can approach it:

1. Calculate Maximum Height: Using JavaScript, we can iterate through all the listing card elements and calculate the maximum height among them. This will help us determine the target height for all cards.

2. Apply Uniform Height: Once we have the maximum height value, we can apply it to all listing cards. By setting the same height for each card, we can ensure that they are displayed with consistent dimensions.

Here's a basic example of how this JavaScript solution could look:

// JavaScript to adjust listing card sizes for uniformity

// Wait for the page to fully load before making any adjustments
window.addEventListener('load', () => {
  const listingCards = document.querySelectorAll('.listing-card');
  let maxHeight = 0;

  // Calculate the maximum height among all listing cards
  listingCards.forEach(card => {
    const cardHeight = card.offsetHeight;
    if (cardHeight > maxHeight) {
      maxHeight = cardHeight;
    }
  });

  // Set the calculated maximum height to all listing cards
  listingCards.forEach(card => {
    card.style.height = `${maxHeight}px`;
  });
});

Please note that while JavaScript can provide a quick solution, we should also consider the impact on performance and responsiveness. If feasible, combining this approach with CSS adjustments for responsive design would yield a more comprehensive solution.

Additional context
I understand that responsive design might lead to some size variation on different screen sizes, but it's important to maintain a consistent aspect ratio to avoid jarring differences in card sizes. This issue could have an impact on user engagement and overall user experience.

Looking forward to contributing to the improvement of the project! If there's any other information needed, please let me know.

[Natalia Venditto]

Hi @michaelkhanda Thanks for opening the issue! Looking forward to your contribution. Please include a gif or video with the results! Thank you!

[Tanmai Kamat]

This issue is already mentioned in #242 and can be solved together!

[Ali Hassnian]

I have solved that issue waiting for mentor so they can assign that task so i can PR

[Ali Hassnian]

@anfibiacreativa can you assign it to me?

[Natalia Venditto]

@anfibiacreativa can you assign it to me?

I'm very sorry that I didn't see this question, @alidotdeveloper . If you would still like to open a PR, I can consider it exceptionally even when the Hackathon time is due, since this was my overlook. Let me know!

[Ali Hassnian]

Sure.. Look like docker domain can't able to connect

[Ali Hassnian]

@anfibiacreativa @juliamuiruri4 can I still fix that issue and pull the PR?

[Julia Muiruri]

@alidotdeveloper - Sorry for catching this late, but please do go one with fixing the issue. Looking forward to your contribution

[Ali Hassnian]

@juliamuiruri4 @anfibiacreativa I have open the pull request