Wkleiłem komendę <meta name="viewport" content="width=device-width"> do headera po to by w pliku z css zastosować parę trików z @media screen and (max-width: XXXpx).
I wszystko działa pięknie, ale tło menu w wersji mobilnej jest wypełnione tylko w 30% pomimo, że odpowiadający za to kod css nie był przeze mnie ruszany (ani modyfikowany komendą @media screen). Więc nie wiem dlaczego <meta name="viewport" content="width=device-width"> to psuje.
Niewypełnione w pełni tło menu widać na SS:
Oraz CSS z którego korzystam:
Cytat
#header{background:#222222;border-bottom:1px solid #363A43;height:56px;margin:0 auto;z-index: 10;position: relative;width:100%;}
#header .wrapper{margin:0 auto;width:980px;}
#header .wrapper #logo{float:left;margin:7px 0 0 0px;width:170px;}
#header .wrapper .headbar-items{float:left; padding-top: 2px; padding-left: 50px;}
#header .wrapper .headbar-items ul {
overflow: hidden;
list-style-type: none;
font-size: 13px;
padding-left: 0px;
width: 100%!important;
}
#header .wrapper{margin:0 auto;width:980px;}
#header .wrapper #logo{float:left;margin:7px 0 0 0px;width:170px;}
#header .wrapper .headbar-items{float:left; padding-top: 2px; padding-left: 50px;}
#header .wrapper .headbar-items ul {
overflow: hidden;
list-style-type: none;
font-size: 13px;
padding-left: 0px;
width: 100%!important;
}
To samo tyczy się paska footer. Wg mnie to nie wina samego kodu CSS, a powiązania z komendą <meta name="viewport" content="width=device-width">. Bo bez niej pasek menu i footer działa OK.
Ktoś ma jakieś pomysły?
Ps. W wersji komputerowej wszystko działa OK:
