DEV Community

Cover image for Pure CSS Flex Box Responsive Design - No Media Queries

Pure CSS Flex Box Responsive Design - No Media Queries

TechSnack - Technology Tutorials on August 12, 2021

Responsive Design Doesn't Have To Be Hard With Flex Box we can easily make our webpage act as a responsive container withou...
Collapse
 
afif profile image
Temani Afif

but the in the mobile version, you blocks are very narrow. Add some content inside them and things will get scrambled.

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials • Edited

This is true. That is why I say to experiment around with the max-width property.
If I have time today I will further update this post to demonstrate a better mobile view.

Collapse
 
mirelaprifti profile image
Mirela Prifti

You can wrap them on smaller screens

Collapse
 
afif profile image
Temani Afif

max-width will not help you because you are dealing with elements getting smaller not getting bigger.

Thread Thread
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you, you are correct. As I have been experimenting with it myself. I will revise what I say in the article and continue to work out the final portions.

Collapse
 
garyinbg profile image
Gary Rowlands

This is a very nice introduction thank you. My girlfriend has a job building sites in WordPress using the Oxygen builder. I deal more with embedded systems but found myself getting very familiar with HTML 5 and CSS3.

These responsive elements are really useful to know more about

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you for the kind words.

Its true that with WordPress the actual HTML5 and CSS3 elements are buried and often may not even be seen by the developer. However, if you choose to develop a child theme or even a stand alone custom theme, these responsive design elements become huge!

P.S. - Even easier with a pre-compiler like SASS

Collapse
 
passivetools profile image
PassiveTools

Totally improved my thoughts about flexbox.
Thank you for a beautiful piece of info

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Thank you for your beautiful words of encouragement! This is the very thing that will keep my drive up for writing articles.

Flexbox gets a bad wrap (pun intended) because CSS Grids are slightly easier to understand. But, it is powerful enough that many WordPress themes are built with flex rows and columns.

Collapse
 
kasir-barati profile image
Mohammad Jawad (Kasir) Barati

Side comment, maybe you could introduce us some websites where we can use and utilize our CSS flexbox knowledge in a more practical way. Like IDK "design this page with CSS flexbox and here is the final HTML/CSS" so that you could practice and compare your solution to theirs so that you can know somehow you're on the right track.

You know what I mean, right?

Collapse
 
cuellar22 profile image
RAUL CUELLAR MORENO

Great!

Collapse
 
ismailisimba profile image
Ismaili Simba

If you add the wrap property, you can have your rows turn into columns on smaller screens.

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials

Sounds like I have something to try out. Thank you!

Collapse
 
techsnack profile image
TechSnack - Technology Tutorials