Home Forums Weaver Xtreme Theme Custom columns width with 4 columns divs.

Topic Resolution: Answered
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #65208
    Answered
    Alexander
    Participant

    I use weaver xtreme and plus. In html insertion area I use div with four divs with class content-4-col.

    Each column has same equal width. How can I set different width for each column in only this block?

    Thanks

     

     

    #65209
    scrambler
    Moderator

    If you have plus, you should try and use the Flex column widget, combined with the “widget Shortcode” plugin to insert the widget inside your content.

    Details can be found in the article below

    https://guide.weavertheme.com/x-plus-flex-widget-usage-and-customizations/

    If you really want to deal with Custom HTML anmd CSS, you can add a second class to each column, so you can change their width individually with CSS.

    HTML would look like

    <div>
    <div class="content-4-col mycol1">Put your first column stuff here.</div>
    <div class="content-4-col mycol2">Put your second column stuff here.</div>
    <div class="content-4-col mycol3">Put your third column content here.</div>
    <div class="content-4-col mycol4">Put your fourth column content here.</div>
    </div>
    <div class="clear-cols"></div>

    then the CSS would be something like (total width =100%)

    .content-4-col .mycol1 {width:30%;}
    .content-4-col .mycol2 {width:20%;}
    .content-4-col .mycol3 {width:40%;}
    .content-4-col .mycol4 {width:10%;}

    If two or more columns will have the same width, use a single class for them and a single rule for the width

    #65210
    Alexander
    Participant

    Thank you.

    How can I create content-5-col class?

    Or use content-2-col inside content-4-col column?

    #65212
    scrambler
    Moderator

    The HTML and CSS was explained in the article below

    https://guide.weavertheme.com/responsive-columns-and-widgets/

    The one for 5 would be

    <div>
    <div class="content-5-col">Put your first column stuff here.</div>
    <div class="content-5-col">Put your second column stuff here.</div>
    <div class="content-5-col">Put your third column content here.</div>
    <div class="content-5-col">Put your fourth column content here.</div>
    <div class="content-5-col">Put your fifth column content here.</div>
    </div>
    <div class="clear-cols"></div>

    CSS

    /*-style for 5 columns on desktop*/
    .content-5-col {float:left;width:20%;padding:0 1%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
    /*-Change to 3 columns on small tablets*/
    .is-smalltablet .content-5-col {width:33.33%;}
    /*-Change to 2 columns on Phones*/
    .is-phone .content-5-col {width:50%;}
    /*-sets the line breaks*/
    :nth-of-type(5n+1).content-5-col {clear:left;}
    .is-smalltablet :nth-of-type(5n+1).content-5-col {clear:none;}
    .is-smalltablet :nth-of-type(3n+1).content-5-col {clear:left;}

    But again, all that would be a lot easier using the Flex column widget that comes with Plus!

    #65215
    Alexander
    Participant

    Can I use Flex column widget anywhere? I need it in the<b> Pre Header </b>HTML Insertion Area.

    #65217
    Best Answer
    scrambler
    Moderator

    This reply has been accepted as the best answer.

    Please read the article I referenced previously on the flex column widget.

    In it and under

    Advanced Customizations
    1) Inserting an X-Plus Flex Columns widget in your content

    You will find how to insert a flex column widget inside any content area using the “Widget shortcode” plugin

    #65220
    Alexander
    Participant

    Thank you. It works.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.