Home Forums Weaver Xtreme Theme X-Plus Flex Columns Widget

Topic Resolution: Answered
Viewing 16 posts - 17 through 32 (of 35 total)
  • Author
    Posts
  • #70743
    GR8FL
    Participant

    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?

     

    #70744
    scrambler
    Moderator

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

    #70745
    GR8FL
    Participant

    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?

    #70746
    Best Answer
    scrambler
    Moderator

    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;

    #70749
    GR8FL
    Participant

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

    #70750
    GR8FL
    Participant

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

    #70751
    scrambler
    Moderator

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

    #70755
    GR8FL
    Participant

    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.

    #70756
    GR8FL
    Participant

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

    #70855
    GR8FL
    Participant

    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>
    #70856
    scrambler
    Moderator

    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

    #70857
    Private Reply
    GR8FL
    Participant
    This reply has been marked as private.
    #70858
    Private Reply
    GR8FL
    Participant
    This reply has been marked as private.
    #70859
    scrambler
    Moderator

    I see 4 columns now.

    #70861
    GR8FL
    Participant

    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.

    #70864
    scrambler
    Moderator

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

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