Skip to content
OverviewSolutions
26
Comments
30

Loai Esam

@LoaiEsam37Egypt670 points

Hi! 👋 I'm Loai, I'm passionate about web programming. I'm a software engineer 🚀, and I'm excited to share my projects with you !

I’m currently learning...

🔹Next.js 🚀🔹TailWindCSS🎨🔹Accessibility 💎

Latest solutions

View more solutions

Latest comments

  • Loai Esam•670
    @LoaiEsam37

    Your solution is truly impressive and legit . Keep going !!! and i have some suggestions to make it more incredible than it is.

    Look i don`t know much about tailwindcss so i will just write css so you can get the idea

    You can add these propeties to <main> tag so that it become responsive to extra large screens :-

    main {
max-width: 1400px;
margin: auto;
}

    and then remove the padding from the media query so that the <main> tag can take its full width:-

    @media (min-width: 768px) {
.md\:p-40 {
padding: 10rem; /* remove this property */
}
}

    there are more details to make it responsive for small screen sizes but to do that i will need to read the full structure of your code and this will be very painful 😅

    hope you found this helpful 😊

    Marked as helpful
  • Loai Esam•670
    @LoaiEsam37

    You're a true expert at coding and Your skills are truly impressive and you can make it more incredible if you use this html structure to wrap the elements and center the container

    <body>
<main>
<div class="container">
<div class="wrapper">
<div class="description">
...
</div>

<div class="ratings">
...
</div>
  
<div class="reviews_container">
...
</div>
</div>
</div>
</main>
</body>

    give the <div class="container"> tag max-width: 1200px; and padding: 0 15px; and remove the padding and display grid from the main tag and give it these properties :-

    main {
display: flex;
justify-content: center;
align-items: center;
}

    and you can use the <div class="wrapper"> for making some padding. there are some more changes but i don`t have time to say it all 😅 also you can checkout my solution for this chalange if you want to see my source code

    hope you found this helpful !!! 😊

    Marked as helpful
  • Loai Esam•670
    @LoaiEsam37

    Wow, your code is truly exceptional! It's so well written and efficient that I think it would be a disservice to try and review it. You've clearly put a lot of time and effort into it, and it shows. Keep up the amazing work!

  • Loai Esam•670
    @LoaiEsam37

    You have made it pixel perfect !!! You're really talented at coding man and I think you are even better than me. Keep going !!!

  • Loai Esam•670
    @LoaiEsam37

    You're really talented at coding! Your solution is truly impressive. Keep going !!!

  • Loai Esam•670
    @LoaiEsam37

    You're a true expert at coding. Your skills are truly impressive. and if you make your code fully responsive it will be incredible. note that the smallest screen size is 320 px. Keep going !!!

View more comments