Changing #primary and #secondary width

Hey there gilis,

How are you doing today?

Ideally you’d want to use different number of columns and apply different classes to primary and secondary elements within page templates but you can easily do this with some custom CSS as well.

To change the width of those two elements please try adding the following to Appearance -> Customize -> Custom CSS:

div#primary {
    width: 66.66666667%;
}

div#secondary {
    width: 33.33333333%;
}

Please note that these are the original values, please change the values to what ever suits you the most ??

If the code doesn’t work please keep it added and post link to your site so I can take a look.

Cheers,
Bojan

Hey Bojan, thx for the fast reply.

I tried moving the elements with % but for responsive layout reasons I would like to use boostrap and change

#primary col-xs-12 col-sm-6 col-md-8 col-md-8 col-single

to

#primary col-xs-12 col-sm-9 col-md-10 col-md-10 col-single

and

#secondary aside col-sm-6 col-md-4

to

#secondary aside col-sm-3 col-md-2

But I cant figure out how to implement the change.

Hey again gilis,

That would require making a lot of changes in theme templates. You’d have to go through each template in your theme and look for primary and secondary elements and change its classes there. Even if you do that all unless you’re using child theme all your changes will be lost once you update the theme.

You can also just use media queries in CSS to apply code to specific resolution. Theme that you’re using have 2 breaking points (768 and 992px) where different CSS for those two elements is being used. You can use the same breaking points in CSS and apply changes you want with just couple of lines of code in CSS.

If you just want this on desktop resolutions you can use the following:

@media (min-width: 992px) {
div#primary {
    width: 66.66666667%;
}

div#secondary {
    width: 33.33333333%;
}
}

Hope this helps ??

Best regards,
Bojan

Hi Bojan,

thank you works like a charm ??

One more question though… ??

Is there a way to hide “widget_nav_menu” from the sidebar in mobile view?

Thanks

Hey again gilis,

I’m not really sure what you’re referring to since I’m not that familiar with the theme but you should be able to apply similar thing to that as well.

Considering this is the correct class of the element that you’re trying to remove you should be adding something like this:

@media (max-width: 768px) {
.widget_nav_menu {
    display: none;
}
}

This should remove element with that class only on resolutions below 768px. If this is not the correct class please post link to your site and let me know what exactly you’re trying to remove so I can help you with the selector ??

Best regards,
Bojan

Thanks a lot ??

Thanks

Hi,

just realized that with the current sidebar settings the sidebar gets pushed down on iPad vertical view.

Any suggestions?

Thank you

Hey again gilis,

What exactly are you looking to do with the sidebar on the tablet view?

Also can you please post a link to your site.

Best regards,
Bojan

I would like the sidebar to do what it is supposed to to do, stay next to the contend.
@media (min-width: 768px)
div#secondary {
width: 25%;

For some reason that I cant figure out it gets pushed below the primary contend, but only when viewing with a tablet, when re-sizing the browser window the sidebar stays where it should be, left of the contend.

the site is on gilis dot asia /gili-air for example

Thank you for your help ??

Hey again gilis,

Can you double check on that link, I can’t open it. I’ve tried few variations but without success ??

Please advise,
Bojan

gilis dot asia

should work…