Desktop --> Mobile

Layout
1

Olá pessoal, consegui montar meu site totalmente pela comunidade, porem, estou enfrentando um problema do qual não acho a resolução aqui.
Eu consegui alterar o cabeçalho do site e deixa-lo na cor “cinza”, via Desktop ficou do jeito que eu queria. Porem, pelo mobile ele fica todo branco, e eu comparei com outros sites e eles ficam iguais ao do Desktop.
Acredito que seja algo no código (porque reparei que esse código também diminuiu a barra de pesquisa no mobile).
Vou postar o código que eu utilizei aqui, se alguém conseguir me ajudar vai quebrar uma árvore.

/* Cabeçalho */
@media only screen and (max-width: 1140px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 60% !important;
}
}

@media only screen and (max-width: 767px){
#cabecalho .conteudo-topo .inferior .span8 {
width: initial !important;
}
}

@media only screen and (max-width: 979px){
#cabecalho .acoes-conta > li > i {
display: block;
width: auto
}

#cabecalho .conteiner .superior .span4 {
width: 149px !important;
}

#cabecalho .conteiner .superior .span4 a {
position: absolute;
right: 15px;
top: 16px
}
}

@media only screen and (max-width: 900px){
#cabecalho .menu.superior > .nivel-um > li {
padding: 0 10px !important;
}
}

@media only screen and (max-width: 950px){
#cabecalho .conteudo-topo .inferior .span8 {
width: 50% !important;
}
}

@media only screen and (max-width: 794px){
#cabecalho .menu.superior > .nivel-um > li > a > strong {
font-size: 9pt !important;
}
}

@media only screen and (min-width: 768px){
#cabecalho .conteiner .menu.superior > ul.nivel-um > li:hover strong,#cabecalho .conteiner .acoes-conta i,#cabecalho .conteiner .acoes-conta a,#cabecalho .carrinho strong.qtd-carrinho,#cabecalho .conteiner .busca button{
color:#666!important;
}

.barra-inicial {
position:absolute;
top:0;
left:0;
width:100%;
background:rgba(0,0,0,.1)!important;
z-index:9
}

.barra-inicial .conteiner .lista-redes {
width:auto;
float:right
}

.barra-inicial .conteiner .lista-redes li {
border:none;
margin-left:5px
}

.barra-inicial .conteiner .lista-redes li i {
font-size:15pt;
background:none;
color:#fff
}

.barra-inicial .conteiner .canais-contato {
float:left;
width:auto;
margin:0
}

.barra-inicial .conteiner .canais-contato>ul>li {
border:none
}

.barra-inicial .conteiner .canais-contato li a {
color:#fff
}

.barra-inicial .conteiner .canais-contato li span {
color:#fff
}

#cabecalho {
position:relative;
}

#cabecalho .conteiner {
padding-top:30px;
box-shadow:none;
background:none;
padding-bottom:50px
}

#cabecalho .conteiner > .row-fluid {
position:relative
}

#cabecalho .conteiner .conteudo-topo {
position:absolute;
right:0;
top:50%;
margin-top:-38px
}

#cabecalho .conteiner .conteudo-topo .superior.row-fluid {
padding:0 0 3px
}

#cabecalho .conteiner .bem-vindo {
text-transform:uppercase;
font-size:8pt!important;
color:#fff;
font-weight:700
}

#cabecalho .conteiner .bem-vindo span {
color:rgba(0,0,0,.6);
font-weight:700
}

#cabecalho .conteiner .acoes-conta > li:first-child {
display:none
}

#cabecalho .conteiner .superior .span4 {
width:auto;
position:absolute;
bottom:0;
right:110px;
margin:0;
padding-right:12px;
border-radius:6px;
background:#fff
}

#cabecalho .conteiner .acoes-conta > li {
display:inline-block;
vertical-align:middle
}

#cabecalho .conteiner .acoes-conta a {
text-transform:uppercase;
color:#fff;
position:relative;
bottom:4px
}

#cabecalho .conteiner .acoes-conta i {
padding:0;
width:50px;
height:auto;
line-height:50px;
font-size:19pt;
margin:0;
background:none;
color:#fff
}

#cabecalho .conteiner .span8.busca-mobile {
margin:0
}

#cabecalho .conteiner .busca {
padding:0;
border:none;
background:none
}

#cabecalho .conteiner .busca input {
width:100%;
padding:0;
height:50px;
box-shadow:none;
border:none;
border-radius:6px;
text-indent:15px
}

#cabecalho .conteiner .busca button {
position:absolute;
border:none;
top:0;
right:0;
height:100%;
border-radius:0 50px 50px 0;
padding:0 15px;
font-size:17pt;
background:none;
}

#cabecalho .span4.hidden-phone {
position:absolute;
margin:0;
right:0;
width:auto;
bottom:0
}

#cabecalho .carrinho {
border-left:1px solid rgba(0,0,0,.12);
padding-left:12px;
border-top:none;
border-right:none;
border-bottom:none
}

#cabecalho .carrinho i.fundo-principal {
font-size:30pt;
background:none;
margin-right:25px;
padding:0;
width:50px;
line-height:50px;
height:auto;
opacity:1
}

#cabecalho .carrinho strong.qtd-carrinho {
position:absolute;
display:block!important;
margin:0;
right:0;
width:20px;
line-height:20px;
font-size:12pt;
top:calc(50% - 10px);
text-align:center;
background:#fff;
border-radius:100%
}

#cabecalho .carrinho > a > span {
display:none
}

#barraTopo .carrinho-interno,#cabecalho .carrinho-interno {
position:absolute;
top:100%
}

#cabecalho .conteiner .menu.superior {
position:absolute;
bottom:-1px;
left:0;
width:100%;
background:#fff;
border-bottom:1px solid rgba(0,0,0,.2)
}

#cabecalho .conteiner .menu.superior > ul.nivel-um {
text-align:center;
max-width:1140px;
padding:0 20px;
margin:0 auto
}

#cabecalho .conteiner .menu.superior ul.nivel-um>li {
float:initial;
border:none;
display:inline-block;
margin-top:initial
}

#cabecalho .conteiner .menu.superior ul.nivel-um li strong {
color:#444;
font-size:10pt;
text-transform:uppercase
}

#cabecalho .conteiner .menu.superior ul.nivel-um ul.nivel-dois {
position:absolute;
top:100%
}
}

1 curtida
2

Olá @DomGabriel,

Em editar CSS, na linha 74, apague o código:

    @media only screen and (max-width: 950px)
        #cabecalho .conteudo-topo .inferior .span8 {
        width: 50% !important; 
    }
1 curtida
3

Muito Obrigado Pela Ajuda, Valeu, Jesus Continue Abençoando

1 curtida