ageitgey / amplify

A Jekyll html theme in the vague style of Medium.com built using Google AMP
https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/2016/03/08/example-post.html
Other
1.87k stars 166 forks source link

Content is not sized correctly for the viewport #32

Open samazgor opened 6 years ago

samazgor commented 6 years ago

Progressive Web App > The viewport size is 1364px, whereas the window size is 1366px.

PN1019 commented 5 years ago

@samazgor try and run this script on the developer console see it return any elements

 (function (d) {
        var w = d.documentElement.offsetWidth,
            t = d.createTreeWalker(d.body, NodeFilter.SHOW_ELEMENT),
            b;
        while (t.nextNode()) {
            b = t.currentNode.getBoundingClientRect();
            if (b.right > w || b.left < 0) {
                t.currentNode.style.setProperty('outline', '1px dotted red', 'important');
                console.log(t.currentNode);
            }
        };
    }(document));

In your case, the element which is overflowing. use css to make sure it doesn't overflow for example , on the container

max-width: 100vw; overflow-x: hidden