Skip to content
Submitted about 3 years ago

Basic HTML and CSS

nauskiā€¢80
@nauski
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What I didn't understand is that while the mobile view is under 375px, the hero image is still 450px wide in the image. So that should probably be scaled somehow. Or is the whole design just slightly narrower.

Community feedback

  • spyderā€¢315
    @ratan17Posted about 3 years ago

    the problem with your image size is because you have used a pixel value. you have set the conatiner's size to 450px so it will ALWAYS TAKE 450px width of the screen no matter which device you are using

    pixel value is an absolute value.

    to overcome your problem you may use a relative unit like %, em, rem, vh, vw etc.

    I would suggest you to read this article about absolute units and relative units :

    https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

    Marked as helpful
    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