Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Ok, so how many of you Divi users love the 2/3 main section and 1/3 sidebar section options in pages that use Page Builder but don’t like how all the other pages are 3/4 by 1/4 by default?

Well there is an easy CSS fix for that.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

And just add this. The mobile friendly code is included.

 


/*Change Post, Project, Archive Page Sidebars from one fourth to one third*/
    .container::before { display:none; }
    .single-project div#left-area {width: 700px;}
    .single-project div#sidebar {width: 300px;}
    .single-post div#left-area {width: 700px;}
    .single-post div#sidebar {width: 300px;}
    .archive div#left-area {width: 700px;}
    .archive div#sidebar {width: 300px;}
    .search div#left-area {width: 700px;}
    .search div#sidebar {width: 300px;}
 
    /* LAPTOP - IPAD LANDSCAPE (981-1100) */
        @media only screen
        and ( min-width: 981px )
        and ( max-width: 1100px ) {
        .single-project div#left-area {width: 630px;}
        .single-project div#sidebar {width: 240px;}
        .single-post div#left-area {width: 630px;}
        .single-post div#sidebar {width: 240px;}
        .archive div#left-area {width: 630px;}
        .archive div#sidebar {width: 240px;}
	.search div#left-area {width: 630px;}
    	.search div#sidebar {width: 240px;}}
 
    /* TABLETS - IPAD PORTRAIT (768-980) */
        @media only screen and (max-width : 980px) {
        .single-project div#left-area {width: 700px;}
        .single-project div#sidebar {width: 700px;}
        .single-post div#left-area {width: 700px;}
        .single-post div#sidebar {width: 700px;}
        .archive div#left-area {width: 700px;}
        .archive div#sidebar {width: 700px;}
	.search div#left-area {width: 700px;}
    	.search div#sidebar {width: 700px;}}
 
    /* MINI TABLETS - IPHONE LANDSCAPE (480-767) */
        @media only screen and ( max-width: 767px ) {
        .single-project div#left-area {width: 400px;}
        .single-project div#sidebar {width: 270px;}
        .single-post div#left-area {width: 400px;}
        .single-post div#sidebar {width: 270px;}
        .archive div#left-area {width: 400px;}
        .archive div#sidebar {width: 270px;}
	.search div#left-area {width: 400px;}
    	.search div#sidebar {width: 270px;}}
 
    /* CELL PHONES - IPHONE PORTRAIT */
        @media only screen and ( max-width: 479px ) {
        .single-post div#left-area {width: 280px;}
        .single-project div#left-area {width: 280px;}
        .single-project div#sidebar {width: 280px;}
        .single-post div#sidebar {width: 280px;}
        .archive div#left-area {width: 280px;}
        .archive div#sidebar {width: 280px;}
	.search div#left-area {width: 280px;}
    	.search div#sidebar {width: 280px;}}

 


 

Well that’s all for now. I hope you find this article useful.

Designs By Geno Quiroz

 

Would you consider a small tip?

001 - Geno Logo Circle - White

$
Personal Info

Donation Total: $10


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest