X-Plus Flex Columns Widget

[GR8FL]

Just posted reply that doesn’t exist here. Trying again.

I want to use the 3 column widget on the same page but each set having different background colors.

Here is the Xtreme Plus Option for what works fine

.widget.content-3-col {width:31%;margin:1% !important; background:#F8F8FF;border: 2px solid #13577f; border-radius:5px; padding:2%; position: relative; padding-bottom:60px;}

Here is the Xtreme Plus Option with different background color
.mywidget.content-3-col {width:31%;margin:1% !important; background:#D3E4ED; border: 2px solid #13577f; border-radius:10px; position: relative; padding-top:2%;padding-left: 1%; padding-right:1%; padding-bottom:60px;}

Here is the html

<div id="mycont" class="widget-eq">
<div class="mywidget 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="mywidget content-3-col"> Row 1 - Second column content Second column content Second column content Second column content</div>
<div class="mywidget 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>
<div style="clear:both;"></div>

The boxes are different heights depending upon how much content is there.

What am I doing wrong?

[scrambler]

The widget must include the widget class

<div id="mycont" class="widget-eq">
<div class="widget mywidget 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 mywidget content-3-col"> Row 1 - Second column content Second column content Second column content Second column content</div>
<div class="widget mywidget 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> <div style="clear:both;"></div>

[GR8FL]

Thank you.

[GR8FL]

This reply has been marked as private.

[scrambler]

You forgot to add float-left to your main styling rule below

.page-id-8235 .widget.content-4-col {width:23%;margin:1% !important;background:#F5FFFA;border: 2px solid #165873;border-radius:5px;padding:1%;position: relative;padding-bottom:60px;float:left;}

In doubts, always refer to the guide article

Responsive Columns and Widgets – Weaver Xtreme Guide (weavertheme.com)

But you have One other error that may cause problems.

IDs must be unique in a page.

All your widget containers are using the same id mycont

You need to change that to mycont1, mycont2, mycont3…. so they all have a different id

 

[scrambler]

In case you saw my initial post before I edited it, above is the Actual problem (missing float-left property)

[GR8FL]

That worked to add it, but it’s weird since I didn’t have float:left; on the other site. The following was placed in the Xtreme Plus tab on the page it’s called from,

.widget.content-4-col {width:23%;margin:1% !important; background:#F5FFFA; border: 2px solid #165873; border-radius:5px; padding:1%; position: relative; padding-bottom:60px;}

.widget.content-3-col {width:31%;margin:1% !important; background:#F8F8FF;border: 2px solid #13577f; border-radius:5px; padding:2%; position: relative; padding-bottom:60px;}

.mywidget.content-3-col {width:31%;margin:1% !important; background:#D3E4ED; border: 2px solid #13577f; border-radius:10px; position: relative; padding-top:2%;padding-left: 1%; padding-right:1%; padding-bottom:60px;}

[scrambler]

Float:left should always be there for the columns CSS, it may work without depending on the context, but should be there for 100% sucess

[GR8FL]

I will add it to all of them.

Thanks @scrambler.

[GR8FL]

And again am running into issues where I had to clone a staging site to meet the particular naming conventions for Gravity Forms.

The old staging site is https://hattie-test.littledropup.com/ and the GF acceptable one is https://test.hattie.littledropup.com. Subtle difference, but they will allow the URL to accept the production site license.

Problem is the widgets don’t appear the same as you can see the Learn More button is not at the same level whether there is less or more rows of text.

I’d like to get rid of the former staging site, but need the new one to look correctly.

[scrambler]

Compare the CSS, the site with the aligned button as an extra rule to do that

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

You may want to add comment to your custom CSS so you can remember what it is for like, using /* comments */

/* css to align buttons */
.mybutton {position:absolute;left:0;bottom:10px;width:100%;}

 

[Author]

Posts