Skip to content
Submitted over 2 years ago

HTML and CSS.

Edward Cicio•20
@Ed-CodePower
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 have a hard time understanding how to set mobile size. For example, I have to make different HTML files for each. Is there another way to do it?

I would like to hear your opinion about how I set up HTML elements. Is it the right amount of elements or too many elements?

I want to hear your advice about committing in CSS.

Community feedback

  • Nelson Murungi•120
    @mwinelPosted over 2 years ago

    Hi, you can take advantage of CSS media queries and you do not need to create different files for different screen sizes. Here is an example https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    0
  • Fernanda•180
    @ferlagherPosted over 2 years ago

    Hi! For the screen size, you can give the body a width:100% and a height:100vh. That will make your body the size of the viewport. There's no need for making diferent files for diferent sizes, you can use relative units (like %, vh, vw, rem and em) and media queries to adapt the page to the screensize. About the HTML elements, I think you could reduce the amount, for expample, the .verticalcenter one, and give the card a margin:auto, that will center your card without needing another div.

    Have a nice day! :)

    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