Submitted almost 4 years ago

Mobile-First Page using CSS Flexbox

Shivam• 520

@shivjoshi1996

Preview site View code

This is a solution for...

Base Apparel coming soon page

HTML
CSS
JS

1newbie

View challenge

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

@GerbenDol

Posted almost 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! 💪🏻

Shivam• 520

@shivjoshi1996

Posted almost 4 years ago

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

Please log in to post a comment

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