Submitted almost 3 years ago

CSS Flexbox

Akerele Tunde• 165

@trafiki

Preview site View code

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I ran into a lot of problems before I was able to make this display on mobile. I have a lot of questions that I don't even know where to start.

UPDATE!

I figured out what I was doing wrong by inspecting bootstrap grid(since they use flexbox for their grids).

What I found out: I was setting a fixed flex basis of 50% on the flex items on mobile. This was inherited from the default style I set for the desktop view(flex: 0 0 50%). I fixed this by setting flex to "0 0 auto" (you can set flex-basis alone to auto if u like). Note that i still had to set a fixed height got the flex item container with the image background for it to show up.

I will appreciate if anyone who is versed in CSS to help me take a look at my code and advise on the things that I'm doing wrong.

Also, for some reason, border-radius doesn't reflect on the row class, Is there a reason for this. This confuses me.

I intentionally submitted it this way so I can get helpful feedbacks so I can refactor my code. Help is greatly needed. Thanks!

Community feedback

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

Hey Akerele,

I think with the image is that you were relying on height for desktop based on the amount of content you had in the left container which is perfectly fine but of course, you'd need to include some sort of min-height value for the image on mobile. Since it is not relying on the content height anymore. Not in the same row but in a different section above on mobile.

The breakpoint is weird. I am not seeing it mobile responsive unless I bring my screen to 480px or less. Of course, if I am at 481px or larger, everything gets cut off. I think you could fix a large majority of the not-so-responsive design by removing width: 1200px; on the container class.

Keep at it. Don't lose the momentum!

Akerele Tunde• 165

@trafiki

Posted almost 3 years ago

Hi @ericsalvi, thanks for the swift reply. How do you suggest that I set the width of the container?

Eric Salvi• 1,330

@ericsalvi

Posted almost 3 years ago

@trafiki well sometimes it is best to have the width controlled by the content. The container width is breaking the fluidity of container on those break points. If you remove it but keep the max-width, the container will not go over the pixels you set there.

Akerele Tunde• 165

@trafiki

Posted almost 3 years ago

@ericsalvi Okay thank you

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