Eleven40Pro – Making Secondary Sidebar Smaller & Content Area Bigger

[Nero]

Hi all!

I'm trying to customize the sidebar-content-sidebar layout in Eleven40Pro Child Theme.

My problem: The content area’s width cannot expand to the LEFT side when I reduce secondary sidebar’s width. It only expands to the RIGHT. There’s a big unused space between left sidebar & content area. I want to use this space to make content area bigger.

How do I make the content use the extra space on the LEFT?

What I've done so far:

Left Sidebar (Secondary) reduced from 150px to 120px (already changed in style.css)

.sidebar-secondary {.sidebar-secondary { float: left; width: 120px;}

Content resized from 660px to 640px to fit primary sidebar (I want it to expand left to make use of the 30px I get from making left sidebar smaller)

.sidebar-content-sidebar .content,.sidebar-content-sidebar .content,.sidebar-sidebar-content .content,.content-sidebar-sidebar .content { width: 640px;}

Right Sidebar (Primary) increased from 250px to 300px (to fit in advertisements)

/* Primary Sidebar */
.sidebar-primary { float: right; width: 300px;}

Any tips are much appreciated. I've looked through the style.css for hours, tried to adjust margins & paddings, but no luck.

https://i.gyazo.com/c9b260fd9d1362347f4b8121f84d1c21.jpg

[Victor Font]

Please post a link to your site. Images help to clarify the problem, but we need to see the code in situ to solve the problem.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Nero]

My apologies Victor - here is the test URL: http://neroclaudius.byethost7.com/test-page/

Hope this makes it easier.

[Nero]

Does anybody have a tip? I still haven't figured it out.

[WisdmLabs]

Hello Nero,

The outer container '.wrap' takes max-width of "1140px" on medium and large devices and for devices with width below "1140px", the width given is "960px". so we will have to manage the width of side bar and content section accordingly for both cases.

case1: for big devices above 1140px, modify the following css

/* style.css - line no 499 */
.content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap{
  width:1020px;
}

/* style.css - line no 524 */
.sidebar-content-sidebar .content, .sidebar-sidebar-content .content, .content-sidebar-sidebar .content {
    width: 720px;
}

case2: for small laptops width range 768px to 1140px, modify the following css

@media only screen and (max-width: 1140px){
 /* style.css - line no 1617 */
 .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar 
 .content-sidebar-wrap, .sidebar-sidebar-content .content-sidebar-wrap {
    width: 840px;
 }

 /* style.css - line no 1628 */
 .content-sidebar-sidebar .content, .sidebar-content-sidebar .content, .sidebar-
 sidebar-content .content {
    width: 540px;
 }
}

check if this works for you and let me know.

- Vishnuprasad from Wisdmlabs

---

http://wisdmlabs.com/

[Nero]

It worked!!!
Thank you so so much Vishnuprasad from Wisdmlabs 🙂

Would never have thought of that. Many thanks, I bow to you ＼(^o^)／

[Author]

Posts