[Resolved] Separated container Issue on mobile

[epickenyan]

Hi. I use separate containers. Below 768px, I see the container leaves space above and on the left side with a grey background (check using mobile not minimizing browser window on pc). How do I remove that white space on the left while retaining the content padding? This does not happen on single posts and pages though (I think it might be the 20px padding for the separate containers).
Second question, would you mind introducing a specific padding feature for the images in the blog section? The padding that is introduced by ticking the box in the customiser leaves a wide white space on the right side of the images which can only be remedied through custom CSS.

[Leo]

Hi there,

Hmm that should be removed by default.

Can you try disabling the caching plugins first so I can tell if it’s a bug or not?

Let me know 🙂

[epickenyan]

Thanks for the suggestion. I use LiteSpeed Cache plugin (my host is on Litespeed) and the ‘combine CSS” feature is what was causing the issue. I disabled it and now it is working fine. Does combining CSS work well with GP?

[Leo]

I think you have to exclude a few files in order to use the combine CSS option.

Do you see much speed difference with and without that option?

[epickenyan]

Yes, I am losing some percentage points in Gtmetrix (2% on average) and Yslow (6%). Also in Google Lighthouse (2-3%). The major issue is to “make fewer HTTP requests”. This happens after disabling combine CSS feature.

[David]

Does the cache include aggregate/combine inline CSS? If so try deselecting that option instead. Combining files shouldn’t effect this option.

[epickenyan]

It does not combine inline CSS. But it does minify inline CSS and JS. Disabling both of them when CSS combine is on did not solve the above issue. So the issue is Combine CSS which is making the container on mobile to have the padding on the left. I am using this code temporarily to solve the problem.

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

[Tom]

Not sure there’s a way around it, as it’s mixing up the order of the CSS.

Maybe try something like Autoptimize for the file combining? It does a great job of this without messing up the order.

[epickenyan]

I will try to do so. Though I was trying to reduce the number of optimization plugins because this plugin specifically targets the server functions directly for optimization.

[Tom]

In that case, you might need to stick with your CSS as a workaround. Unless of course there’s a workaround to maintain the proper order of the CSS in LiteSpeed Cache.

[epickenyan]

Thanks, Tom. I will try to raise the issue with them directly and then get back.

[Tom]

Sounds good 🙂

[epickenyan]

Hi Tom, this question was not addressed

Second question, would you mind introducing a specific padding feature for the images in the blog section when separate containers are enabled? The padding that is introduced by ticking the box in the customiser leaves a wide white space on the right side of the images which can only be remedied through custom CSS.

[Tom]

I’m not too sure what you mean there? Like separate padding for around the images than everything else?

[epickenyan]

When the containers are not separated (in the blog section), the padding on the images is even. When you separate them, it leaves a big white space on the right side and top side of each image (see http://prntscr.com/n5ua2c). So, yes, I agree with your suggestion to introduce a feature that separates padding for images with everything else.

[Author]

Posts