Skip to content
Submitted over 4 years ago

Simple HTML and CSS used to make a responsive website

Qaiser Waseem•10
@king-qais
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I might have a little issue making it responsive on mobile. Somehow there is less margin on the right side when viewing on mobile. Also whenever you open it mobile, the website appears slightly zoomed in.

Community feedback

  • Alex Kim•1,325
    @alex-kim-devPosted over 4 years ago

    Hello, the reason for this is that the cards have fixed width of 350px. If you open the page on 375px wide screen the total width (card + margin & padding) will exceed that limit, and the page will have a horizontal scroll. Typically the mobile layout is made using width: 100%; to make sure it's always full width.

    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