Sometimes you may notice that your website displays an unintended horizontal scrollbar. You may be wondering what is the cause.

Table of contents

    Most often this issue is caused by the DOM element being wider than a document.

    You can try to find this element in the web inspector, but there is a great and easy JS solution that will console log all elements that go beyond the screen:

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

    That's it, no need to waste your time searching for overflowed elements anymore!

    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog

    Context maintainability & guidelines in Elixir & Phoenix

    Context maintainability & guidelines in Elixir & Phoenix

    The concept of Phoenix Context may appear straightforward, yet its potential for significantly boosting Phoenix app maintainability is profound. However, the truth is many developers grapple with its effective implementation. In this blog post, I will unveil a strategic solution for optimizing context organization, a critical step towards sustainable and efficient Phoenix app development.