Hello,
I’m using Vantage theme. I wanted to resize the sidebar to make it a little larger with the following added to Custom CSS:
/* Narrow Sidebar */
body.has-sidebar #secondary {
width: 28%;
}
body.has-sidebar #primary {
width: 65%;
}
/* End Narrow Sidebar*/
This works great for the desktop but compresses the page on mobile devices. How can I adjust the sidebar size without affecting mobile display?
Thank you.
Anthony
Hi Akogak
I would recommend using the following CSS instead:
@media (min-width: 681px){ /* Content area */ .page-template-default #primary, #primary, .woocommerce-page #container { width: 71.287%; } /* Sidebar */ #secondary { width: 23.762%; } } /* Allow for full width templates to continue working */ .page-template-home-panels #primary, .page-layout-no-sidebar #primary, .page-layout-full-width #primary { width: 100% !important; }You might also need to install the SiteOrigin CSS Editor.
Thank you. It works great! I just have one question. Can I adjust the widths to any size I want. I noticed you used ratio of 71.287% to 23.762%. Is there any reason you broke it out into 3 decimal places. Is that necessary or could I use whole numbers like 68% to 25%. Thanks again.
Anthony
Hi Anthony,
Yes, as long as the width doesn’t exceed 100% you can set any ratio you like.
To answer your question about the numbers, it’s the default theme sizing. As far as I know, there’s no specific reason for it.