Announcement

Collapse
No announcement yet.

How to create a 2-column 50/50 layout

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to create a 2-column 50/50 layout

    It's unusual for websites to have a 50-50 layout. But in case you want it, you can do so with the following instructions:

    1. Use the existing 70-30 or Wide-Narrow layout.
    2. Add the below CSS to css_additional template in AdminCP or in CSS Editor in Sitebuilder.

    Code:
    /* 50/50 Layout - START */
    .pageX.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
    .pageX.l-desktop .l-row__fixed--right > .l-col__flex-6 {
        margin-right: 50%;
    }
    
    .pageX.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
        margin-right: -50%;
    }
    
    .pageX.l-desktop .l-row__fixed--right > .l-col__fixed-6 {
        width: 50%;
    }
    /* 50/50 Layout - END */
    Change .pageX CSS class with the corresponding page class for your site. To get it, right click and inspect the page and then look for the <body> tag. For example:

    Code:
    <body class="l-desktop page1 vb-page view-mode"
    In the example above, the page has .page1 class. Use that to replace .pageX class.

    3. If you have other pages that you also want to use the same 50/50 layout, then you need to duplicate the CSS rules and change the page class accordingly. For example, if you want the pages with .page1 and .page2 classes to have 50/50 layout, then the CSS code would be:

    Code:
    /* 50/50 Layout - START */
    .page1.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
    .page1.l-desktop .l-row__fixed--right > .l-col__flex-6,
    .page2.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,
    .page2.l-desktop .l-row__fixed--right > .l-col__flex-6 {
        margin-right: 50%;
    }
    
    .page1.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first,
    .page2.l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
        margin-right: -50%;
    }
    
    .page1.l-desktop .l-row__fixed--right > .l-col__fixed-6,
    .page2.l-desktop .l-row__fixed--right > .l-col__fixed-6 {
        width: 50%;
    }
    /* 50/50 Layout - END */
    4. Repeat for all other active styles/themes in your site, if any.

    #2
    Thank you! That's exactly what I was looking for, where as you shrink it the two columns shrink equally and maintain the 50/50 ratio! Awesome!

    Comment

    Working...
    X