[Resolved] Issues with GP Premium Mobile Layout

[SAGAR]

Hi Tom and everyone,

I just purchased the GP Premium Theme and its fantastic.

My PSI score immediately shot up to 90+ by just using this theme which is awesome.

URL I am talking about: https://www.personalfinancefreedom.com/

I am a Canadian Personal Finance Blogger and the desktop site looks the way I want it, no issues here.

However, I am facing some issues with the Mobile Layout

Actual Issue on mobile :

The issue I am facing in on both archive pages (homepage and other pages as well) and individual post pages as well.

Issue: I don’t see the separation grid and layout seems to be broken.

When you hit the URL on mobile, you can see that the two-column width is broken on mobile and there’s an uneven border and post grid, while on the post pages I am seeing just white background and no border or gradient as in desktop.

What I want: Just as in desktop, boxes with grey background if its one post since the screen is small for both homepage, pages and post page just as in Desktop.

Thanks,
Sagar, Toronto, Canada

[Leo]

Hi there,

Any chance you can disable all plugins except GP Premium to eliminate conflicts from other plugins first?

Let me know 🙂

[SAGAR]

Hi Leo,

I can’t do that right now, however I can give you the list of plugins I have active and running.

BTW except WP Rocket, I do not have any other caching or front end plugin such as autoptimize or Page Speed Ninja installed. Its only WP Rocket at the moment.

[Leo]

Maybe try disabling WP Rocket first?

[SAGAR]

sure doing it right now.

[SAGAR]

Done, can you please check now? I am still not seeing the Grid as in desktop?

[Leo]

Sorry I might have misunderstood.

By default the 2 columns turn into 1 column on mobile as there is usually not enough space for 2 columns on mobile.

So you actually still want the 2 columns on mobile? Might be very cramped on narrow mobile screens.

there’s an uneven border and post grid

Looks like this one is solved though.

[SAGAR]

Hey Leo,

All I need is a grid as in desktop, even if its one column I am happy with that.

Complete box structure with content inside, right now it’s not uniform on mobile as you can see for both archive and posts page.

Yup the uneven is gone now.

[SAGAR]

In simple words to help you understand better, here’s what I need om Mobile-only:

1. One column of Archive and Post page content within the border and grey outside, similar to desktop now.

that’s it!

As of now, it’s very uneven on mobile with borders not around.

Please let me know if any questions!

[Leo]

Try adding this CSS:

@media (max-width: 768px) {
    .generate-columns-container>* {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[SAGAR]

Hey Leo, that code works on the homepage/archive pages, thanks!

However the code is still not working on the post/article pages (full-length posts), I still dont see the grid here.

~S

[Leo]

Try this as well:

@media (max-width: 768px) {
    body.single .site-main, body.page .site-main {
        margin-left: 25px!important;
        margin-right: 25px!important;
    }
}

[SAGAR]

Thanks, that worked.

[Leo]

No problem 🙂

[Author]

Posts