Home Forums Weaver Xtreme Theme X-Plus Flex Columns Widget

Topic Resolution: Answered
Viewing 9 posts - 17 through 25 (of 25 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.

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