[Resolved] Images overflowing creating a horizontal scroll bar

[Saul]

Hi,

When adding images to the wordpress blocks of cover, gallery, and image the site page overflows.

Why does this happen and is there a way to fix+prevent this from happening?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Saul]

Just pasted link to private info box

[Leo]

I see that you are already using GB so have you considered using the container block from GB to replace the cover block from WP?

Cover block uses a hacky way to make things full width which causes some issue like the horizontal scroll bar.

If you are already using GB then that is definitely the way to go.

Let me know if you need more info.

[Saul]

I’ve tried using the generate container block for the images as well but I still get the overflow. For example, on the website I contained the images below the cover in a container block. But they still overflow.

[Saul]

When I inspect the webpage and search this code:

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

I get all the images overflowing, even the contained ones.

[Leo]

K I see several other issues.

– Can you first uncheck aligned full in the image block added inside the container?

– Can you activate this setting in the container block first?
https://www.screencast.com/t/EB5aMyHP

[Saul]

I did what you suggested and just center aligned the images.
They don’t overflow but they’re also not full width.
Now, all that’s overflowing is the cover image.

[Leo]

The linked page no longer works for me. Can you double check?

I did what you suggested and just center aligned the images.
They don’t overflow but they’re also not full width.

I believe that’s because the images themselves aren’t wide enough. Try something like 2000px.

[Saul]

Hi Leo, Thank you for responding.
You can try now. I created a sample page to simplify everything.
When I add the cover image it overflows.

[Leo]

Would you mind trying to recreate that Sample cover section with GenerateBlocks only?

So add a container block, set the page to full width:
https://www.screencast.com/t/EB5aMyHP

And set the container width to full width:
https://docs.generateblocks.com/article/container-overview/#standalone-block

Upload the background image:
https://docs.generateblocks.com/article/container-overview/#background-image

Then add a Headline block for the text:
https://docs.generateblocks.com/article/headline-overview/

[Saul]

Thank you for your patience Leo,
I did all the steps above and the image still overflows. but now, there is also a white space on the left side of the iamge.
It almost seems like there’s margin issues

[Saul]

When I inspect the page it shows unevenness in the right margin.

[Saul]

this helps for a wp block cover image inside a generate block container.

Change wp block cover width to auto

.wp-block-cover, .wp-block-cover-image {
width: auto;
} 

[Leo]

So don’t need the WP cover block at all for this layout.

Can you remove that?

You can achieve the exact same appearance you have right now with just the container block from GB.

[Author]

Posts