[Resolved] Copyright split into left/right section, centered in mobile

[generatepressiscool]

I’ve done this: https://generatepress.com/forums/topic/copyright-formatting/

Worked to get copyright showing left, while site info showing right.

However I’d like the whole footer to show centered in mobile. How to do this?

[Tom]

Any chance you can link me to the page?

[generatepressiscool]

Can, it’s not live yet, staging site.

The instructions here worked fine: https://generatepress.com/forums/topic/copyright-formatting/

Just when switching to mobile (decrease size window) the footer keeps showing one part right/one part left. Not clean, it should be centered. How to do this?

Example is this footer:
http://www.webtogether.ie/blog/fat-website-footers-what-are-they-and-why-do-we-love-them
=> copyright left, site info right on desktop view
=> on mobile copyright is up centered, site info below, centered

how to get that?

[Tom]

You could try this:

@media (max-width: 768px) {
    .inside-site-info {
        text-align: center;
    }
}

Then take the CSS you added to split it into two columns and put it inside this media query:

@media (min-width:769px) {
    /* 2 column CSS in here */
}

[generatepressiscool]

Okay, got it to work adding this:

@media (min-width: 769px) {
    .copyright-right-area {
        text-align: right;
    }
    .copyright-left-area {
        text-align: left;
    }
}

for the divs itself:

<div class="grid-50 copyright-left-area">copyright text</div>
<div class="grid-50 copyright-right-area">siteinfo</div>

Result:
– desktop: copyright is left, siteinfo right – on same vertical height
– mobile: both are centered/stacked – stacked on top of eachother

only issue
– ipad: copyright is left, siteinfo is right but they’re not vertically aligned well. It seems the grid columns instead of showing next to eachother are stacked on top of eachother. Thsi is same behavior as on mobile, but not centered
– the text inside the grids are not taking the full width of the grids, so it shouldn’t be stacking them on top of eachother
– ideal here would be to show the copyright/siteinfo vertically aligned on same level (showing left/right) like with desktop view… unless there’s not enough space to make it fit then spillover to mobile centered view.

Suggestions?

[Tom]

After grid-50 in your code, add tablet-grid-50 as well.

That will tell it to be 50% on tablets as well as desktop.

[generatepressiscool]

Amazing, this works! Thanks a lot for your help and patience 🙂

[Tom]

You’re welcome 🙂

[Author]

Posts