Home › Forums › Weaver Xtreme Theme › X-Plus Flex Columns Widget › Reply To: X-Plus Flex Columns Widget
June 3, 2022 at 18:06 UTC - Views: 14
#70861
Participant
I figured it from another thread. Added the following to my global CSS
/*-style for 4 columns on desktop*/
.content-4-col {float:left;width:25%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
/*-Change to 2 columns on small tablets*/
.is-smalltablet .content-4-col {width:50%;}
/*-Change to 1 columns on Phones*/
.is-phone .content-4-col {width:100%;}
/*-sets the line breaks*/
:nth-of-type(4n+1).content-4-col {clear:left;}
.is-smalltablet :nth-of-type(4n+1).content-4-col {clear:none;}
.is-smalltablet :nth-of-type(2n+1).content-4-col {clear:left;}
If there is a more simple way, I’d love to hear it.
Thank you.