Archived topic

Align text instead of containers

5 replies · Started by Kevin on March 24, 2019

Viewing posts 1–6 of 6

March 24, 2019 at 10:33 am #848418

In this example:

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.

Can this design be achieved by using GP settings? (If yes, what are they)
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.

March 24, 2019 at 4:34 pm #848583

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 :)

March 26, 2019 at 2:38 pm #850816

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!

March 26, 2019 at 3:56 pm #850851

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

March 27, 2019 at 8:29 am #851570

I really appreciate it. Thanks!

March 27, 2019 at 9:11 am #851625

You're welcome.

This archived topic is closed to new replies.

Start building better websites today.