width:100% doesn't work on mobile browser

Question

First of all i must say that i tried all solutions on this site. I want to set width:100% on main div. It work on desktop browsers but not on mobile browsers. Here is css of my main div:

.main {
    height: 100%;
    width: 100%;    
    margin-left: auto;
    margin-right: auto;
    margin-top: -66px;
    opacity: 0.83;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    -webkit-box-shadow: 7px 7px 7px #CCC;
       -moz-box-shadow: 15px 15px 15px #CCC;
            box-shadow: 20px 20px 20px #000;
    background-color: #FFFFFF;
    color: #000000;
}

body is defined:

html, body {
    height: 100%;
}
body {
    width: 100%;    
    height: 1100px;
    background-color: #222930;
}

Header is set to 100% too:

.header {
    height: 93px;
    width:100%;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    background-color: #F0EBEB;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
}

I tried:

set min-width: 100%; to body, header, main
set <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="viewport" content="width=800" />
transform: scale(.5); ...

What is problem?

Edit: when the page load div is on 100%. But i can scroll to right for 100px or more px. overflow-x: hidden; doesn't work.

doesnt work. I tried overflow-x:hidden but it doesnt help. When the page load it is on 100%width but i can scroll to right. — Fakt7, Aug 03 '14 at 15:07

score 3 · Answer 1 · answered Aug 03 '14 at 15:24

3

Finally it fix overflow-x:hidden. Page load with 100% width but i can scroll to right.

answered Aug 03 '14 at 15:24

Fakt7

187
4
15

Funny how your own awnser is -1 and it was the only solution I found for my view problem, +1. – Matheus Ribeiro May 28 '20 at 17:48
Dude, the problem you had 8 years ago saved my life today. Thanks to comeback and answer your own question – Mauro Vinicius Oct 18 '22 at 00:20

score 2 · Accepted Answer · edited Aug 03 '14 at 15:22

2

This is a known issue with Safari Browser. You can fix it by creating CSS viewport, or by adding min-width to CSS.
Try min-width: 980px;

edited Aug 03 '14 at 15:22

Volker E.

5,911
11
47
64

answered Aug 03 '14 at 15:15

Ahmad Harb

605
3
17

i resolve it finally with overflow-x:hidden; I don't try Safari. – Fakt7 Aug 03 '14 at 15:18

width:100% doesn't work on mobile browser

2 Answers2

Linked