Skip to content
Submitted over 4 years ago

Mobile-First Page using CSS Flexbox

Shivam•520
@shivjoshi1996
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hey guys,

I skipped the JS for this challenge, I'll probably come back to it a little later. Some questions:

  • Any improvements on the way I made the mobile & desktop images switch out? I had a little trouble figuring out the best way to make them switch, as well as positioning the logo where I wanted it to go.
  • Best way to define the width of content? For example, the logo, h1, p, and form all use padding-left: vh to make them all line up. Is there a better way to do this?

Cheers

Community feedback

  • Gerben Dol•3,115
    @GerbenDolPosted over 4 years ago

    Hey!

    So my tip: instead of setting a padding or margin left on all the separate content elements, just set a padding-left on your .left-wrapper so it's more universal and anything your throw in there is just aligned properly by default.

    Great solution overall, keep up the good work! 💪🏻

    2
    Shivam•520
    @shivjoshi1996Posted over 4 years ago

    @GerbenDol Awesome, that makes total sense. Thanks for the tip!

    1

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