Skip to content
Submitted almost 3 years ago

Mobile First Responsive Web Page using CSS Flex Box

Jillian Lemsanes•30
@jillianlemsanes
A solution to the Clipboard landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Questions I have:

  1. How to make my buttons responsive? I ended up just making a media query at small screen sizes that allowed the buttons to not "break" at smaller screens. The buttons looked great until about 350 px and smaller. I could not find a great way to make the button proportionally shrink with the screen. In the media query, I ended up changing my padding and font size which ended up working great...but is this good practice?

  2. Any good tips on making spaces between sections of code? I got the web page to look how I needed it, but I ended up using so many margins and padding that I am sure there is a better way to do this. If you take a look at my code, you will see lots of "margin-bottom" and properties like this, and I want to know if there is a better and cleaner way to get spacing right.

Code

Please log in to post a comment

Log in

Community feedback

  • Sahand Masoleh•1,210
    @sahand-masoleh

    Hi there!

    You don't need to concern yourself with view widths smaller than 250px in my opinion, a lot of major websites are already broken at that point.

    1. For your buttons, I would put the button styling on the container around the anchor tag, that way it could grow and shrink naturally without breaking. Get used to using wrappers, they result in ugly code but are the solution to many problems.

    2. If you use flex-box or grid layouts, you can use the gap property to put spaces between your elements and reduce the use of margins. With grid, you can also set your track sizes and sometimes move the spacing login to the container that way.

    Marked as helpful

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