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

    Free Mod 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 */
    [COLOR=#FF0000].pageX[/COLOR].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%;
    }
    
    [COLOR=#FF0000].pageX[/COLOR].l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first {
        margin-right: -50%;
    }
    
    [COLOR=#FF0000].pageX[/COLOR].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 [COLOR=#FF0000]page1[/COLOR] 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 */
    [COLOR=#0000FF][B].page1[/B].l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content,[/COLOR]
    [COLOR=#008000][B].page1[/B].l-desktop .l-row__fixed--right > .l-col__flex-6[/COLOR],
    [COLOR=#0000FF][B].page2[/B].l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first > .l-col__flex-content[/COLOR][COLOR=#008000],
    [B].page2[/B].l-desktop .l-row__fixed--right > .l-col__flex-6[/COLOR] {
        margin-right: 50%;
    }
    
    [COLOR=#0000FF][B].page1[/B].l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first[/COLOR],
    [COLOR=#008000][B].page2[/B].l-desktop .l-row__fixed--right > .l-col__flex-6.l-col--flex-first[/COLOR] {
        margin-right: -50%;
    }
    
    [COLOR=#0000FF][B].page1[/B].l-desktop .l-row__fixed--right > .l-col__fixed-6[/COLOR],
    [COLOR=#008000][B].page2[/B].l-desktop .l-row__fixed--right > .l-col__fixed-6[/COLOR] {
        width: 50%;
    }
    /* 50/50 Layout - END */
    4. Repeat for all other active styles/themes in your site, if any.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #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

    Users Viewing This Page

    Collapse

    There is 1 user viewing this forum topic.

    • Guest Guest

    Latest Posts

    Collapse

    Working...
    X
    Searching...Please wait.
    An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

    Please push the back button and reload the previous window.'
    An unexpected error was returned: 'Your submission could not be processed because the token has expired.

    Please push the back button and reload the previous window.'
    An internal error has occurred and the module cannot be displayed.
    There are no results that meet this criteria.
    Search Result for "|||"