Why is my body width smaller then the viewport when trying to create responsive content?

I think my header content is correct

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <title>The Brewery</title> 
</head>

Yet when viewing in the browser it isn’t. (I have specifically removed all my styles to ensure that it’s not a bug in my CSS. Here’s what I see

Is it one of those Javascript scripts that’s affecting the layout?

1 Like

Do you have some content that is wider than the viewport at that size?

e.g. If you have an image that is larger than the devices width then that will have the effect of shrinking the width of the other content. Therefore ensure you are images are fluid or have a max-width of 100%.

Do you have a link to the site in question?

2 Likes

Damn, that’s it.

I didn’t write the HTML so I forgot, I’m reverse engineering a layout

Images

Thanks

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.