Issue with mobile viewing and image sizes in general

Hi there,

Can you disable your caching plugin and so I can inspect the code better?

Hi. It makes no sense to deactivate wprocket. You can use this method: https://docs.wp-rocket.me/article/1285-bypass-wp-rockets-caching-and-optimizations . We also use cloudflare and statically. So I can't deactivate everything...

Hi there,

1. This is because the post list block you're using is set to Align Wide in the alignment option in the block toolbar.

The space to the right is due to their CSS, you can overwrite it like this:

@media (max-width: 768px) {
    .wp-block-latest-posts.is-grid li {
        margin-right: 0;
    }
}

2. Does the block you're using allow you to set an image size? If so, you'd need to create an image size and use it: https://docs.generatepress.com/article/adding-image-sizes/

Thanks. I need the wide alignment as if it is not like that the column width is shorter. I know about doing it with css (I appreciate the snippet), I was just thinking if there was something I was missing.
As for 2.. I will not add more sizes just for that if there is no other way to set it.
Thanks a lot for all that.

Last question. If I want to make home page in a more creative way, do you suggest any extra Gutenberg based plugin? I don't want to add elementor or wpbakery or other composer. I had such before and I couldn't optimize the whole site correctly for web vitals.

No problem! CSS is the only way to disable the align wide CSS on mobile.

Have you checked out our GenerateBlocks plugin? It's worth a play: https://generateblocks.com

Any demo site/pages to see what is the actual capability per block?

Hi. I still see a problem.
Here is the case.
I added a hero on home page. That leaves a gap between the hero and the header. If I change the page to Contained that gap is removed BUT the issue with the post items sticking only to the left appears again.

So I want to have the items as Wide in desktop and show correctly in smartphones AND have the hero without a gap from the menu.

I also noticed that when I scroll the page, the sticky smartphone menu moves out of the screen.

AND an additional thing i noticed in home. Even with center posts grid (not wide) it seems it adds an extra amount of space to the right side of the whole content in home. Why? It scrolls horizontally

In general the home page performs really bad in smartphones

Hi. I managed to solve all issues with CSS. the horizontal scrolling in smartphones and desktops was solved with:

html,
body {
overflow-x: hidden !important;
}

Hi Christos,

The page has horizontal scroll is because you still have an align wide container:
https://www.screencast.com/t/lS6eTnYxp

Hi. the element is full width.
I solved the issues with CSS, but... what you reply is not logical. I mean when I have an element with full width or wide it makes no sense that extra padding is "somehow" added on the left or right. Full width means full width.

If I remove the overflow hidden class, even with full width on that element the extra space shows again...

It is the same issue like when the latest posts in home page (with wide setting show more space at the right and zero at the left, for which you provided the class to fix. Which of course is not correct as there has to be some space left and right in the same way single posts content shows up.

I mean from the design point of view that is not logical.

The issue here is actually a bit of a bug. The content is set to display without padding, but the align-wide option depends on the content padding to make the element wide.

So, it's assuming we're using padding and adjusting the align-wide element based on it. In this case there is no padding, so you're seeing horizontal scroll.

This is the fix if you don't want to use the overflow: hidden fix:

@media (max-width: 768px) {
    .contained-content .entry-content .alignwide {
        margin-left: 0;
        width: auto;
    }
}