Search code examples
htmlcssviewport

Whole HTML document get resized to less than half the width on mobile

When I resize my webpage in browser or visit it on my phone, the tag is like half or maybe less width of the page, the smaller the window, the bigger the gap. See screenshots below:

1


2

Some additional info: I use symfony, I have this in my code:
<meta name="viewport" content="width=device-width, initial-scale=1">

The rest of the web is ok, just pages in one of my layouts are affected, but I have basically the same headers as in the other layouts, which means same styles and meta tags...

Solution

  • So I found out that it was partly because of facebook like button, which I have placed there. Idk why, it didn't exceed any of the divs. After I deleted it, I found another problem. One of my col-xs-12s had URL address in it, which acts as a single block, which forced it to exceed its div and make a gap on the side.

    Anyway, I just decided to delete the code from element to element and ultimately found out the problem, which is what matters. Solved by deleting facebook like button, that is no longer needed and shortening the URL address using twig truncate function.

    Thanks to everyone, who tried to help. I really appreciate it!