-1

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...

Seb33300
  • 7,464
  • 2
  • 40
  • 57
Ezir cz
  • 50
  • 7
  • Is their some styling on the root html tag which is changing the margin/padding/width of the root element it self – Somangshu Goswami Feb 03 '20 at 17:31
  • 1
    We need to see your CSS and HTML mate. Just because you have the same stylesheet linked in all of your pages doesn't mean it can't contain classes messing up some sites while working on others. – main.c Feb 03 '20 at 17:34
  • I checked the stylesheets and I did not find any styles regarding nor dimensions, nor margin or padding. I could provide you with the stylesheets, but it is literally hundreds of lines of code... – Ezir cz Feb 03 '20 at 17:47
  • Did you check nasty inline-css within your HTML? – main.c Feb 03 '20 at 18:05
  • I second that you need to show at least some code. Maybe try to narrow the code to where the problem occurs, and show that? It's pretty impossible to guess. – Marina M Feb 03 '20 at 18:43
  • 1
    This happens when there is an element wider then the screen width. Although the "initial scale" is specified as 1, that doesn't prevent the browser from zooming out until the widest element fits. – Mr Lister Feb 03 '20 at 18:57
  • I can give a link to the html.twig file, but not the css. I'm sure it won't be helpful as there is just too much code to read through. – Ezir cz Feb 04 '20 at 15:36

1 Answers1

0

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!

Ezir cz
  • 50
  • 7
  • You need to use the [CSS word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) property to force URLs to be broken if they expand outside their box. [See this example Q](https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table?rq=1) for implementation – Martin Feb 06 '20 at 14:43