How to stop horizontal moving of the site design?

Is there a way to prevent the site layout to move out of the screen horizontal for all viewports?

as you can see here: the site can be moved out of the window

I have had a similar problem. There is an element in your page that is wider than the page width.

I now have a js fragment I call which lists all the elements that are too wide.
I found the essence of it on stackoverflow (I think)

const checkOverflow = () => {
  var docWidth = document.documentElement.offsetWidth;
  console.log(`Document width is ${docWidth}`);
    function (el) {
      if (el.offsetWidth > docWidth) {
        console.log(`tag: ${el.tagName}, id: ${}, class: ${el.classList}, WIDTH: ${el.offsetWidth}`)
export default checkOverflow

and in the js for a page (or all pages) I call

 import checkOverflow from 'Utilities/overflow'  //... or wherever you put it. 
... do stuff to initialize the page...

Console messages like this may help you to identify elements which are wider than the document.

Document width is 465 
tag: SECTION, id: excerpts, class: , WIDTH: 1715 
tag: DIV, id: , class: marquee, WIDTH: 1667

best wishes

As soon as I scroll where the header is not visible, it stops being able to slide off screen. I’ve looked at the html/css. I don’t see what might be causing that, but suspect the answer is in the the header section somewhere.

Thanks for the feedback. I already solved it a bit the slider buttons where to far out of the screen-width. And as you mention there might be something in the header that is disturbing things. So further analysing then :slight_smile: