[Support request] adjusting whitespace / spacing & width for posts (w/o breaking responsiveness)

[Nick]

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 🙂

[Roberto Enrique]

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*/
}

[Tom]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Nick]

Thanks for the answers guys!

@generate Any idea when the next version is due? 🙂

[Tom]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts