Stackable Blocks Causes Horizontal Scrolling

  • Not sure what is happening but when I import a Design Library block or even create a Stackable Container and drop in 2 columns with a few blocks, it creates a horizontal scrollbar in the browser. What could be causing this? When I ungroup from Container, the horizontal scrolling is fixed.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter mealto

    (@mealto)

    Found something that may help with the troubleshooting. When I add a background color is when the horizontal scrollbar appears. Have tired to set Left and Right padding to 0 and even selected No padding but still the same. Looks like there is left and right margins pushing the container wider than the browser. This happens right away with noting in the container and only background color enabled. Any ideas?

    Thread Starter mealto

    (@mealto)

    I am now able to isolate the issue caused by this CSS:

    .no-sidebar .entry-content .alignfull {
    margin-right: calc(-100vw/2 + 100%/2);
    }

    With this unchecked using Chrome inspect, the horizontal scrollbar is fixed.

    How do I fix this short of overriding this CSS? Thanks.

    • This reply was modified 4 years, 9 months ago by mealto.
    Thread Starter mealto

    (@mealto)

    Spoke too soon, overiding the above CSS did help but a new container now creates a small scroll able section. I hope there is a fix as your plugin has lots of potential. But not being able to use a Container without causing a horizontal scrollbar is an issue.

    Thanks.

    Thread Starter mealto

    (@mealto)

    I have been doing more troubleshooting and found that this combination is the onyl way to fix this overflow issue:

    .no-sidebar .entry-content .alignfull {
    /* margin-left: calc(-100vw/2 + 100%/2); */
    /* margin-right: calc(-100vw/2 + 100%/2); */
    max-width: 100vw;
    width: auto;
    }

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    /* margin: 0; */
    padding: 0;
    }

    Looks like something is conflicting causing Google Chrome to push the container beyond the browser limits. Is there a resolution for this?

    I have this same issue. Downloaded the stackable blocks designer and it’s causing a horizontal bar on all pages I created with stackable. All my elementor pages are fine. This is a nightmare as I don’t know about coding or how to resolve this.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Stackable Blocks Causes Horizontal Scrolling’ is closed to new replies.