Skip to content
Submitted over 2 years ago

Responsive landing page using media queries

Olusesi Samuel•40
@SeNaTu24
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found styling my project difficult especially using my "container width". I am also not sure on the responsiveness of the code. Looking forward to hearing from my learned co-developers on how to improve most especially my CSS.

Community feedback

  • Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 years ago

    Hi! I think the best way to center a single element on the page is by giving the body ;

    display: grid (i think flex can also work here)
place-items:center;

    and making the height and width of the body full as well (asin 100vh and 100vw). After that, no more worrying about centering so you can just use percentages like you did.

    0
    Olusesi Samuel•40
    @SeNaTu24Posted over 2 years ago

    @Opeoluwa-Ogunlaja Thanks. I will put that into practice

    0
    Opeoluwa•330
    @Opeoluwa-OgunlajaPosted over 2 years ago

    @SeNaTu24 👍👍

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord