Clever Geek Handbook

Unresponsive website - browsing issue - page showing enlarged image on mobile devices

I put together a page using html and css with a header, page content and footer 1170px wide (same as boostrap), adding width + border + padding together.

I am also using the meta tag viewport. For that matter, I leave it as attached below.

I expected the content (header, content, footer) to be placed in the viewport (img 1) on mobiles and this will happen in some, but I noticed that on some devices it actually only displays a portion of the content and gives me a horizontal scroll bar (img 2).

Content View on Mobile

I searched a lot for the viewport but couldn't find a solution on how to make it look like img 1 on all devices. Please advise.

You can view the code in Test ViewPort mode . I'm not going to change this. For tests I will use the following, development

VIEWPORT

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

CSS

  *{
    margin:0;
    padding:0;
    border:0;
  }
  div.header,
  div.content,
  div.footer{
    width:100%;
  }
  div.header{
    background:blue;
  }
  div.content{
    background:orange;
  }
  div.footer{
    background:purple;
  }
  div.wrapper{
    width:1120px;
    border:10px solid green;
    padding:0 15px 0 15px;
    margin:0 auto;
    background:red;
  }

Html

<div class="header">
  <div class="wrapper">
      <h1>Header</div>
  </div>
</div>
<div class="content">
  <div class="wrapper">
      <h1>Content</h1>
  </div>
</div>   
<div class="footer">
  <div class="wrapper">
      <h1>Footer</h1>
  </div>
</div>
+3


source to share


3 answers


If you are not using media queries and just want the 1170px fixed layout to be filled with a mobile screen, change this:

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


:

<meta name="viewport" content="width=1170">
+5


source


Great Stuff, however, I found that if you are on the desktop and the viewport is set to static width, backgrounds may not appear on areas of the screen that are not displayed when scrolling horizontally.

To fix this for non-responsive pages, just add a minimum width to the body.

body {
    min-width: 1170px;
}


Note that this is in addition to setting the viewport to a static width

<meta name=viewport content="width=1170">
+1


source


Given that this is a non-responsive website, all the metadata to view requires its website width, in my case, 1170px. The metadata viewer now looks like this:

<meta name=viewport content="width=1170">
0


source






More articles:


All Articles