Skip to content
Submitted about 5 years ago

Mobile-first four column layout using Flexbox

Shivam•520
@shivjoshi1996
A solution to the Four card feature section challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • Pranshu Dobhal•295
    @pranshudobhal

    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!

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