X-Plus Flex Columns Widget

[GR8FL]

I mean using this…

<div>
<div class="content-3-col">first column content goes here</div>
<div class="content-3-col">second column content goes here</div>
<div class="content-3-col">third column content goes here</div>
</div>

Also, is there a way to control the width? If not that, the spacing in between the columns to make it have more white space in between?

 

[scrambler]

Here is the HTML to use

<div id="mycont" class="widget-eq">
<div class="widget content-3-col"> Row 1 - First column content First column content First column content First column content First column content First column content First column content </div>
<div class="widget content-3-col"> Row 1 - Second column content Second column content Second column content Second column content</div>
<div class="widget content-3-col"> Row 1 - Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content</div>
<div class="widget content-3-col"> Row 2 - First column content First column content First column content First column content First column content</div>
<div class="widget content-3-col"> Row 2 - Second column content Second column content Second column content Second column content Second column content Second column content Second column content Second column content Second column content Second column content Second column content</div>
<div class="widget content-3-col"> Row 2 - Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content</div>
</div>
<div style="clear:both;"></div>

And the CSS to add the Page editing page > Xtreme Settings > Xtreem Plus tab > Per page style box

.widget.content-3-col {width:31%;margin:1.15%;background:grey;border:3px solid black;border-radius:10px;}

[GR8FL]

Take a look at https://hattiesgarden.com/test-columns/

I’d like to have the Learn More Buttons align horizontally. In this example, I’d like columns one and two buttons to align with column three since that had the most amount of text.

Is this possible?

[scrambler]

This reply has been accepted as the best answer.

You need to put a class on the paragraph tag

<p style="text-align:center;" class="mybutton">
<a class="myButtonSmallTest" title="Learn About A.A." href="https://hattiesgarden.com/delivery/order/">Learn More</a>
</p>

Then add the CSS below

.mybutton {position:absolute;left:0;bottom:10px;width:100%;}

Yu also need to add a CSS property position:relative   to the column rule

.widget.content-3-col {width:31%;margin:1.15%;background:grey;border:3px solid black;border-radius:10px;position:relative;}

If the button starts colliding with the text, you may need to add a bottom padding too

padding-bottom:50px;

[GR8FL]

Thank you @Scrambler. This is so helpful. Really do appreciate the help.

[GR8FL]

Spoke too soon. It’s not stacking one column at a time on mobile.

[scrambler]

By default, the three column class switches to 2 columns on mobile, but we do need to update the rule to account for the new margin and we can add one for single column on phones

Add the rules below in the theme Global custom CSS rule box

.is-mobile .widget.content-3-col {width:48%;}
.is-phone .widget.content-3-col {width:98%;}

and if you want a single column on both tablet and phone only add the single rule below
.is-mobile .widget.content-3-col {width:98%;}

[GR8FL]

I tried both set of rules, and it still shows two unresponsive columns on my phone. Tried it with both Safari and Chrome on iPhone 13.

Even this page isn’t looking right on the phone. http://demo.weavertheme.com/widgets/

It was never an issue on the iPad.

[GR8FL]

Update: Added !important with the rule. Now is working.

[GR8FL]

Can I do 4 columns across?

I tried in the Xtreme Plus per page styling

.widget.content-4-col {width:22%;margin:1% !important; background:#ebf1f9; border: 2px solid #275388; border-radius:10px; padding:2%; position: relative; padding-bottom:60px;}

but it doesn’t go across 4 columns.

The html:

<div id="mycont" class="widget-eq">

<div class="widget content-3-col"> Row 1 - First column content First column content First column content First column content First column content First column content First column content </div>
<div class="widget content-4-col"> Row 1 - Second column content Second column content Second column content Second column content</div>
<div class="widget content-4-col"> Row 1 - Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content Third column content</div>
<div class="widget content-4-col"> Row 1 - Fourth column content First column content First column content First column content First column content</div>
</div>
<div style="clear:both;"></div>

[scrambler]

You are using 3-col class instead of 4-col in the first div

give  a link to the page with the 4 boxes if you need more

[GR8FL]

This reply has been marked as private.

[GR8FL]

This reply has been marked as private.

[scrambler]

I see 4 columns now.

[GR8FL]

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.

[scrambler]

It sounds about right and there is a guide article on it

[Author]

Posts