CODEWITHSUNDEEP
htmlcssdom
Tolga Kısaoğulları
Tolga Kısaoğulları

Reputation: 638

Fixed width on mobile does not work

EDIT FOR SOLUTION FOR MY ISSUE: 

html {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    position: relative;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    letter-spacing: -.2px;
    font-kerning: normal;
    position: relative;
    overflow-x: auto;
}
.wrapperAudit {
    min-height: 100%;
    width: 100%;
    position: absolute;
    background-color: #cbdcc6;
    min-width: 991px;
}

-----------------------------END OF EDIT---------------------------------

I'm using a wrapper div to make full page background image on my website and I want to make fixed wrapper div width like;

min-width:991px;

It works well if I open it on pc and it works well when I resize it below 991px as well.

enter image description here

But when I open the website on mobile device, it looks like that:

enter image description here

Could you please explain to me what is wrong here ?

Here is my code:

html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    letter-spacing: -.2px;
    font-kerning: normal;
}
.wrapper{
    min-height: 100%;
    width: 100%;
    position: relative;
    background-color: #cbdcc6;
    min-width: 991px;
}

Upvotes: 3

Views: 125

Answers (3)

A1raa
A1raa

Reputation: 625

It would make more sense to just have a fixed div as CEP said. An alternative to his answer would be to use 100% of the viewers height and width by using the VH and VW units.

html

<div id="bground"></div>

<div id="first-div">
Hi, I'm a preety cool div who can't spell!
</div>

css

#bground
{
  background-color: green;
  position: fixed;
  z-index: -1;
  height: 100vh;
  width: 100vw;
}

#first-div
{
  background-color: white;
  padding: 2em;
}

https://jsfiddle.net/sLm1k410/

Upvotes: 0

pradeepcep
pradeepcep

Reputation: 932

Why don't you make the wrapper a fixed div that covers the page?

For example, inside your page's body, have a

<div id="wrapper"></div>

And in your CSS,

#wrapper
{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -99999;
  background-color: green; /* modify this to suit you */
}

The z-index: -99999 is to make sure the background stays under all other elements. Just make sure this value is less than the z-index values of all other elements in your page.

Here's a JSFiddle. Hope that helped.

Upvotes: 0

blairmeister
blairmeister

Reputation: 915

You need to tell it to look for a mobile

include the viewport meta tag at the top of your HTML

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

https://developers.google.com/webmasters/mobile-sites/mobile-seo/responsive-design?hl=en

Upvotes: 1

Related Questions