Changing the widths of the primary and secondary containers in West Pro


#1

Hi,

Could you please let me know what is the best way to change the widths of the #primary and #secondary containers ?
I’d like to make #primary wider by 60px and #secondary narrower also by 6opx.

I know that I can simply change the widths in my child theme’s style.css, but once I do that , I also change the behaviour on the smaller screens.

Thanks,

Zoran


#2

Hi,

Please post a link to your website, so I can help you change the primary container and secondary container width only on desktop.

Best Regards,
Csaba


#3

Hi Csaba,

Thank you for replying.
I have a staging site, where I’m testing the theme for my client
The front page is also the blog, so you can see the sidebar HERE

Also, the sidebar on the WooCommerce Shop page

is on the left side, and I couldn’t find any Admin setting that is responsible for this.

Not sure why is this happening .
Is switching the sidebar on the Shop page also something that has to be done in CSS ?

Thanks,

Zoran


#4

Hi,

You can make the site wider / make the content area / sidebar wider by 60px each only on desktop ( above 1200px screen-width ) with this Custom CSS:

@media (min-width: 1200px) {
.home .container, .woocommerce-page .container {
    width: 1290px !important;
}

.home .content-area, .woocommerce-page .content-area {
    width: 800px !important;
}

.home .widget-area, .woocommerce .widget-area {
    width: 420px !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also use this plugin to add the CSS to it: https://wordpress.org/plugins/simple-custom-css/ so you will not loose the changes on theme updates.

Please let me know how it works.

Best Regards,
Csaba


#5

Hi Csaba,

Thank you for your reply.

I tested your code, and unfortunately it doesn’t work the way I’d want it to work.

The media query is set to min 1200px and the .container width is set to 1290, at the same time.
Which means that in the range of 1200 to 1290, the sidebar is cut off by the browser.

On the side note, I wanted to make the sidebar NARROWER, by 60px and the main content area WIDER.

Also, since the media query for the desktop is quite wide ( at 1200px ), I’d need to affect this kind of change to every media query before the sidebar goes to the bottom, on smaller devices.

Cheers,

Z


#6

If you like, I can give you admin access to the site, so you can access the WordPress editor, on the site itself.


#7

You can also see the live site, HERE , to see the effect of the code snippet you provided.


#8

Hi,

If you want to make the sidebar narrower, then you can use this Custom CSS:

@media (min-width: 1200px) {
.home .container, .woocommerce-page .container {
    width: 1200px !important;
}

.home .content-area, .woocommerce-page .content-area {
    width: 780px !important;
}

.home .widget-area, .woocommerce .widget-area {
    width: 360px !important;
}
}

or if you want to keep the width 1290px, then use this Custom CSS:

@media (min-width: 1290px) {
.home .container, .woocommerce-page .container {
    width: 1290px !important;
}

.home .content-area, .woocommerce-page .content-area {
    width: 800px !important;
}

.home .widget-area, .woocommerce .widget-area {
    width: 360px !important;
}
}

Also you can use the both CSS, one for 1200 and other for 1290.

Please let me know how it works.

Best Regards,
Csaba