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.

[Author]

Posts