Skip to content
Submitted over 4 years ago

Mobile-first four column layout using Flexbox

Shivam•520
@shivjoshi1996
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

Hey guys,

This is my first submission. I'm looking for any suggestions on improvements, including the way I have structured the HTML (e.g. more HTML 5 Classes, etc).

Also looking for improvements that can be made to:

  • Way I've implemented font size (currently learning rem/em, so this is just a first rough attempt).
  • Ways to improve responsiveness
  • Ways to improve flexbox usage.

Thanks!

Community feedback

  • Pranshu Dobhal•295
    @pranshudobhalPosted over 4 years ago

    Hi Shivam,

    I looked at your code and it looks pretty good. I have a few suggestions.

    1. When viewing the website in mobile size, the "Reliable, efficient delivery" and "powered by technology" look big on mobile devices. I see that on the mobile device, the font-size that is being applied to the headings is 2rem. If you change the value to 1.5rem, it looks much better and closer to the design provided.

    2. I saw that you defined font-size 100%. I don't know what your default font values are in Chrome. But in general, the default values for chrome is 16px. So, when you write 100%, the value is set to 16px. But as mentioned in the design, the value should be 15px.

    3. For responsiveness, the way I've implemented it is using Bootstrap 4 as it uses flexbox now instead of float and positioning. So, it is much easier and convenient to position and align the items individually. And Bootstrap is great for responsiveness as well. So, it

    I would love it if you could review my solution and let me know the areas where I can improve. Thanks!

    2
    Shivam•520
    @shivjoshi1996Posted over 4 years ago

    @pranshudobhal Hey there, thanks for the feedback. I'll definitely take it on-board. I'll check out your code now :)

    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