Site URL: https://kickinthecreatives.com/front-page/
Hi
I am creating a site using the Divi theme with circles representing the months. In full screen I have 4 columns of circles. When it goes down to tablet size there is only one. Is there any way with media queries that I could either make them shrink instead or go two or three column instead?
Thanks for your help.
One way i’d do it is by warping those circles into another DIV than give that DIV a width:100%; than since it is 4 circles make each one have width:25%; so when the window shrinks so does the circles.
The only problem is if the screen gets too small the circles will become completely small if you set a fixed height than those circles will come it in a very narrow OVAL and you don’t really want that.
If you are going to use media queries than use them at 50% after certain screen width to put 2 in a row.
otherwise there are methods to use display:flex unfortunately I am not very familiar with flex 
Thank you. I am not really sure how I specify those things while I am using the Divi theme.
Sorry if this is a dumb question 
but what theme is that?
Sorry I should have explained, it’s a Wordpress theme - https://www.elegantthemes.com/gallery/
There are a few way it could be done.
Are you stuck with the existing html structure? It seems to have been built with rows of four in mind.
Here is how I may do it with flex, without changing the html (though I would change it if I could).
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.