Search code examples
htmlcsssymfonyresponsive

How to make body width responsively match to device width

I have a problem with my Symfony application. When I want to do the responsive, I encounter a problem with the size.

https://i.sstatic.net/oak77.png.

As you can see on the image below, I have a screen size of 604px except that my body element has a size of 980px while I have not defined any size in the style. If anyone has an answer.

THANKS

Solution

  • Use viewport meta tag in your head tag!

    As mentioned in [Mozilla MDN][1]:

    Some mobile devices and other narrow screens render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 640px space.

    So using this tag in your <head> would solve your issue

    <meta name="viewport" content="width=device-width, initial-scale=1" />