Archived topic
adjusting whitespace / spacing & width for posts (w/o breaking responsiveness)
4 replies · Started by Nick on December 20, 2016
Hi Tom,
I have 2 questions if you don't mind:
1) Is there a way to use some more whitespace/spacing around posts without it affecting the responsiveness of the theme?
I'd like a layout along the lines of http://www.copyblogger.com/bad-advice-2016/ for my posts/content.
2) In addition I would also like the content span to be less wide in general (especially the content without sidebars layout).
How would I go about doing this?
I added the CSS below and it seems to work, but tbh I have no idea what I'm doing so I'd rather ask, lol.
.content-area {
max-width: 780px;
margin: 0 auto;
}Any help would be awesome!
Thanks :)
I suggest you to try also the media queries in your css.
I ussually start my custom css with this:
/*GENERAL STYLES*/
/*add device agnostic styles here*/
/*STYLES JUST FOR DESKTOP*/
@media only screen and ( min-width: 950px ) {/*Desktop*/
/*add your rules for desktop here*/
}
/*STYLES JUST FOR MOBILE*/
@media screen and (max-width: 768px) {/*tablet + mobile*/
/*add your rules for tablet/mobile here*/
}
In the next version of GP Premium, there's a separate option for the mobile content padding which will help a lot when it comes to this.
Using media queries for now as Roberto pointed out is the way to go.
Your CSS for the content-area is 100% perfect, exactly how I would do it :)
Thanks for the answers guys!
@generate Any idea when the next version is due? :)
Early in the new year I would say.
Easy enough to do with CSS for now:
@media (max-width: 768px) {
.separate-containers .inside-article {
padding: 20px;
}
}