Skip to content
Submitted 3 days ago

Responsive landing page using HTML and CSS

Eniola•10
@Enniolami
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of the fact that i am able to do something and i will ensure to do better

What challenges did you encounter, and how did you overcome them?

trying to style the page and i overcame it by searching online and asking for help

What specific areas of your project would you like help with?

the css styling area

Community feedback

  • beowulf1958•1,450
    @beowulf1958Posted 3 days ago

    Congratulations on completing this challenge. The desktop version looks o.k.; however the container "breaks" on the phone size screen. To fix this in the styling do the following:

    1. Remove font-weight: 500px; and font-weight: 300px; Font-weight does not take a unit like pixel or rem.
    2. Remove font-optical-sizing: 50px This confuses the browser. font-optical-sizing takes either auto or none, not a number. This article will explain.
    3. Remove the height from the container. The height will adjust automatically. If you set a height, the contents of the container will "spill out" at different screen sizes.
    4. Change width: 50%; to width: 350px;

    Now the page looks better. Hope this helps.

    Marked as helpful
    0
    Eniola•10
    @EnniolamiPosted 3 days ago

    @beowulf1958 Thank you so much for this I’d make possible changes

    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