Hi all! I’ve finally made big changes in the design of the page. Tell me what you think.
https://codepen.io/33P/full/dyYJXBa
It doesn’t look good in a cell phone though. I’ll have to address that later.
I would suggest that this is what you do first, not later. Start with your browser as narrow as you can make it and style the page so it looks good. This will be your base CSS. Then, only after it looks good at the skinny width, slowly widen the browser until you feel you have enough room to rearrange elements for a wider view port. This will be your first CSS break point (using min-width: XXem). Then add additional styles under that break point for the wider view port. Continue this process as much as needed.
1 Like
Hi @bbsmooth if you’re still around. I’m doing what you told me. I have checked everywhere including a nice page a fellow camper recommended me https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I’ve read it through and through and that was what helped me with the design in the first place.
And I’m stuck in such a dumb way it seems! I’ve tried everything but couldn’t make the second white box go below the two first boxes and so creating a layout for small cell phone screens.
I know it must be a simple code I’m skipping. I mean, there must be something with the width of the main element that acts like container? I don’t know.
So if you or someone can help me with this, it would be rad. And thanks in advance.
Here’s my pen so far: https://codepen.io/33P/pen/dyYJXBa