Home Forums Weaver Xtreme Theme X-Plus Flex Columns Widget

Topic Resolution: Answered
Viewing 11 posts - 33 through 43 (of 43 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.

    #71516
    Private Reply
    GR8FL
    Participant
    This reply has been marked as private.
    #71517
    scrambler
    Moderator

    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

     

    #71518
    scrambler
    Moderator

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

    #71519
    GR8FL
    Participant

    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;}

    #71520
    scrambler
    Moderator

    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

    #71521
    GR8FL
    Participant

    I will add it to all of them.

    Thanks @scrambler.

    #71545
    GR8FL
    Participant

    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.

    #71549
    scrambler
    Moderator

    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%;}

     

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