Archived topic

Aligning elements on mobile

5 replies · Started by Erika on May 23, 2022

Viewing posts 1–6 of 6

May 23, 2022 at 5:22 am #2229400

Hey there,

#1
I have inline elements in the header of a website. Desktop they look good.

I´d like to align them UNDER each other on mobile. Is that possible? Or would there be another solution to place these elements near each other to the right in the top bar by using container and then set the widht on mobile to 100%?

#2
In the footer I have the copyright and a secondyary menu. I´d like to have them both centered on mobile. Menu displays well. Grid is set to center, but the html is not centered. Why? Sure I could give the p a class and center it by css, but I wonder why the grid vertical align does not work.

Thanks,

Erika

May 23, 2022 at 5:57 am #2229432

Hi there,

try adding this CSS to stack the inline elements:

@media(max-width: 768px) {
    .gb-container.inline-post-meta-area > .gb-inside-container {
        flex-direction: column;
    }
    .site-footer > div:last-child {
        text-align: center;
    }
}

May 23, 2022 at 6:29 am #2229468

Thanks, David. What about the alignement of grid content on mobile? Thank you :)

May 23, 2022 at 8:22 am #2229760

Oops i posted the CSS without #2. See here:

https://generatepress.com/forums/topic/aligning-elements-on-mobile/#post-2229432

I updated the CSS

May 23, 2022 at 11:43 pm #2230362

Awesome like always :) Thanks!

May 24, 2022 at 12:53 am #2230429

Glad to be of help!

This archived topic is closed to new replies.

Start building better websites today.