[Resolved] Align text instead of containers

[Kevin]

In this example:

https://imgur.com/a/vGK2CG6

Left design aligns the containers.
Right design aligns the text.

Out of the box, GeneratePress uses the left design. I want my website to use the right design. I’ve spent many hours tinkering and can kind of achieve it in desktop viewport but is inconsistent on tablet and mobile as content is snug up against the screen edge.

1. Can this design be achieved by using GP settings? (If yes, what are they)
2. Does it require custom CSS?

Here is a GP export I’ve been tinkering with…
https://www.dropbox.com/s/ce5wgixiet5qcy3/generate-settings-export-03-24-2019.json?dl=0

Thanks in advance.

[Tom]

Hi there,

You likely can’t do this with the settings alone. How are you creating the separate boxes? Any chance you can link us to the site you’re working on?

Let me know 🙂

[Kevin]

The separate boxes are created by GeneratePress (header, content, footer, etc).

Here is a page with the “symptom” in action http://generatepress.itslimetime.net/page/

I can provide a username/password outside of this public thread.

Thanks!

[David]

Hi there,

i find the simplest method is to reduce the max width of the header and footer by the total left and right container padding e.g 1000px wide container – 80px = 920px wide.

.inside-header.grid-container, 
.footer-widgets-container.grid-container {
    max-width: 920px;
}

[Kevin]

I really appreciate it. Thanks!

[David]

You’re welcome.

[Author]

Posts