[Resolved] Compatibility with WP-Rocket! Mobile view is broken & Serve scaled images issue

[Arnab Mohapatra]

Hey!
Hope you are doing good!
I am noticing that GP is not fully compatible with WP Rocket.
Here are the problems I am facing-
1) Mobile view is broken-
Whenever I activate wp rocket it adds an extra padding of 50px. But When I disable, it works fine.
Moreover, this issue arises only if you aren’t logged in. Here are few snaps.



2) Moreove Gt metrix is showing serve scaled images error when site is tested with firefox & in chrome no error!


I have been using WP-Rocket for a long while. Never faced similar problems.

3) Google Pagespeed is showing Montserrat font is being used, but as per as I can recall, I am not using it anywhere! If you can help find out how it is being loaded will be helpful.

[Tom]

Hi there,

1. What version of GP Premium are you using? Your site is missing some CSS to remove that spacing on mobile. Does the issue go away if you deactivate WP Rocket?

2. Not too sure what you mean? Are the images on your site much larger than the container they’re inside?

3. I’m not seeing Montserrat in the page source, however it’s hard to see while the caching is on.

[Arnab Mohapatra]

1. I am using 1.6.2(both plugin & theme are in latest version)
Yes, when I deactivate Wp rocket the issue goes away!
2. Yes, In firefox
Hope this screenshot helps.

3. Should I share access?

[Tom]

1. So what’s happening here is WP Rocket is changing the order of the CSS, which breaks how it cascades. I’m not familiar with their options enough to offer a solution, but you can try this:

@media (max-width: 767px) {
    .generate-columns {
        padding-left: 0 !important;
    }
}

2. Have you tried resizing your images down to a width closer to your container width?

3. It would be easier just to disable WP Rocket for now so I can read the source.

[Arnab Mohapatra]

1) Solved
2) Not sure how to do that.
Here is the error I am referring to. https://gtmetrix.com/reports/buycameranow.com/AfkU6Acr
3) Deactivated.

[Tom]

2. If you open the image in the Media Library, click “Edit Image”. You’ll see a “Scale” option where you can add a custom width.

You can also use an image editing software like Photoshop.

The images you’ve uploaded are way too big, so these issues will go away once you resize them.

3. The font looks like it’s being added by a plugin. It’s referenced in this CSS block almost 100 times: tve_custom_style

[Author]

Posts