Archived topic

Two URLs on Mobile devices are pushed to far left

5 replies · Started by Anne on November 7, 2022

Viewing posts 1–6 of 6

November 7, 2022 at 2:50 pm #2405418

I'm perplexed. One my home page and another post, my .inside-article is pushed too far to the left. It needs to come right about 30px. On mobile and desktop, the setting is:

.inside-article {
    max-width: 90%;
    margin-left: -10px;
}

The container padding is set to 30px all around.

But, I can't figure out why these two pages aren't complying. The other mobile pages work fine. I've cleared cache on the server, Cloudflare and my browser. I've also checked to see if I had any simple css code that might conflict. I think this is a recent issue as it used to work. I'm going to spin up a test site and see if I can dupe.

You can see an example at https://www.timeatlas.com

Example of content pushed left on home page

November 7, 2022 at 4:19 pm #2405476

Hi there,

Not sure if I fully understand.

The CSS snippet you mentioned above is added by you and not theme settings.

Why is it needed in the first place?

November 7, 2022 at 5:38 pm #2405536

Hi Leo,

yes, I added that CSS to align the content better with the main menu. It's more apparent on the desktop whereas the mobile has the hamburger menu.

But it seems on these 2 pages, the padding I applied for the theme for mobile layout isn't honored.

November 7, 2022 at 5:47 pm #2405539

yes, I added that CSS to align the content better with the main menu.

The CSS definitely isn't the best solution for this.

Have you tried these options?
https://docs.generatepress.com/article/container-alignment/

Another solution is to make your CSS desktop only:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

November 8, 2022 at 7:57 am #2406560

Hi Leo,

I tried the container option and removed the CSS I had. I also removed all media queries.

While the 2 problem pages no longer have a truncated left side, there still is no padding.

I don't know what is different about these 2 posts to cause this. But, this is a better scenario.

November 8, 2022 at 10:08 am #2406773

I'm actually still seeing this CSS on the home page:

.inside-article {
    max-width: 90%;
    margin-left: -10px;
}

To be honest that is simply not a good CSS to use. Can you remove it first?

I'm also having a hard time seeing the source code of your site. The classes in <body> are not all visible.

Can you make sure you are not using the content container option here?
https://docs.generatepress.com/article/content-container/

That's the only option which removes the padding added in the customizer.

This archived topic is closed to new replies.

Start building better websites today.