Thanks for the theme comment!
Are you wanting your content area to be fluid as in 100% of any screen size, or wider but not too much, or smaller?
It’s perfect on mobile devices. I wanted to make the content and sidebar width smaller for larger screens like my laptop.
Would setting a max width in my custom css plugin do the trick? Or would I need to put css code to increase left and right margins?
Thanks so much for your quick reply
David
Actually, it would be a little more involved, although it can still be done using just CSS. This theme uses the Bootstrap grid framework for the layout, so to make the width a little smaller on desktop view, you will need to add some custom CSS in addition to the media queries for desktop view.
One more question…is it just the content area only, or also the header and footer area as well? Once I know, I can give you an example of what you can do.
Just the content area only. Im happy with the header and footer.
Thanks again
David
Hi David….it’s going on midnight for me here so hopefully you are not in a rush for this, but I will follow up with the solution for you tomorrow.
Andre
No problem Andre, whenever you can, im in no rush :). I really appreciate it, thanks
I think I have the solution for you, but you will need to use a plugin like Simple Custom CSS for this. It also allows you to get theme updates without losing your custom changes.
@media (min-width: 992px) {
.site-main .container {
width: 900px;
}
}
@media (min-width: 1200px) {
.site-main .container {
width: 1000px;
}
}
This will target only the “container” class in the main content area only. You can adjust the width’s that you see above, but I made them smaller than the default theme’s own widths:
@media (min-width: 992px) {
.container {
width: 1000px;
}
}
@media (min-width: 1200px) {
.container {
width: 1200px;
}
}
Andre,
Superb:) Exactly what I wanted to do. Thanks a million for your help. It’s a class theme, delighted I found it. Thanks for your rapid responses too, much appreciated.
All the best,
David
