Skip to content
Submitted about 2 years ago

Responsive mobile first with flex box and media queries

y4rb0w•260
@Yavanha
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

Hello everybody,

The thing that got me while doing this project, is I have no idea how to handle the height to center the main container. So I did something whith the min-height on the main container element.

I would like to know if what I did is considered as good practices or there is a better solution ?

Except from this, I really enjoyed working on this project, so if you have any feedback please feel free to le me know.

Thank you

Community feedback

  • kxnzx•870
    @kxnzxPosted about 2 years ago

    Hi! You did a good job. What you did is considered as good practice. Well done!

    I have a suggestion: It is good to use div’s for the purpose of styling and arranging components on the page. Div’s are like empty containers, but they do not have any semantic meaning. So instead of <div class="container"> use <main class="container">.

    The main tag is considered an accessibility landmark and ensures that a screen reader and people with visual impairment have the ability to jump to sections of the page. Examples of landmarks are: header, nav, main, aside, section, footer.

    Marked as helpful
    1
    y4rb0w•260
    @YavanhaPosted about 2 years ago

    @kxnzx Thank you very much

    0
    kxnzx•870
    @kxnzxPosted about 2 years ago

    @Yavanha Yrw! :)

    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