Topic: Display on Mobile

mattgenova
September 4, 2024 at 3:44 pm

Hi,

Hoping this is an easy fix. I added the link to private information. When I view this on mobile it looks like there is no border/padding for the content as it goes straight to each side of my phone screen. Is there an easy way to just give it a little margin on each side?

Also, Is there anyway to have the logo and hamburger navigation display in one line together as opposed to the hamburger icon always dropping below?

Thank you
Alvind
September 5, 2024 at 5:34 am

Hi there,

Just to confirm, is this the only page that has this issue?
mattgenova
September 6, 2024 at 7:47 am

Yes, almost all of them. The one page that appears to display correctly on mobile (with some space on each side) is what i just added to the private information. But that one also has the hamburger menu below the logo
Tom
September 6, 2024 at 9:57 am
Hi there,

You could:

a) Add left/right padding to your Container blocks on the pages.
b) Add some CSS:
```
@media (max-width: 768px) {
    .site-main {
        padding-left: 10px;
        padding-right: 10px;
    }
}
```
As for the logo/menu toggle – you’ll need to decrease the font size of your site title on mobile. You can do this in Customize > Typography: https://docs.generatepress.com/article/dynamic-typography-overview/

Let us know if you need more info 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

Display on Mobile