[Resolved] Images overflowing creating a horizontal scroll bar

Home Forums Support Images overflowing creating a horizontal scroll bar

  • This topic has 18 replies, 2 voices, and was last updated 5 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1467642
    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?

    #1467728
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know 🙂

    #1467772
    Saul

    Just pasted link to private info box

    #1467786
    Leo
    Staff
    Customer Support

    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.

    #1467794
    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.

    #1467801
    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.

    #1467803
    Leo
    Staff
    Customer Support

    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

    #1467815
    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.

    #1468141
    Leo
    Staff
    Customer Support

    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.

    #1469297
    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.

    #1469351
    Leo
    Staff
    Customer Support

    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/

    #1469362
    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

    #1469380
    Saul

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

    #1469385
    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;
    } 
    #1469546
    Leo
    Staff
    Customer Support

    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.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.