Home Forums Weaver Xtreme Theme X-Plus Flex Columns Widget

Topic Resolution: Answered
Viewing 3 posts - 33 through 35 (of 35 total)
  • Author
    Posts
  • #70873
    GR8FL
    Participant

    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?

    #70874
    scrambler
    Moderator

    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>
    #70875
    GR8FL
    Participant

    Thank you.

Viewing 3 posts - 33 through 35 (of 35 total)
  • You must be logged in to reply to this topic.