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.
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:
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:
4. Repeat for all other active styles/themes in your site, if any.
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 */
Code:
<body class="l-desktop [COLOR=#FF0000]page1[/COLOR] vb-page view-mode"
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 */
Comment