Problema com o Newsletter - Urgente [MODERADO]

Olá pessoal, boa tarde,
Estou precisando arrumar o newsletter que ao colocar no no celular ele fica todo desconfigurado!
eu fiz algumas alterações e ele ficou assim!

O código abaixo:

.abriga-news{
display: none;
}
.pagina-inicial .abriga-news{
display: block;
background: #4e6e77;
height: 36px;
}
.abriga-news .componente{
background: none;
max-width: 974px;
margin: 0 auto;
}
.abriga-news .componente .interno{
padding: 0;
border: 0 none;
}
.abriga-news .alinha-left{
float: left;
width: 76%;
}
.abriga-news .newsletter .texto-news{
background: url(//cdn.awsli.com.br/119/119688/arquivos/newletter.png) no-repeat;
float: left;
font-size: 0;
height: 36px;
width: 300px;
}
.abriga-news .newsletter .texto-newsletter{
float: left;
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 36px;
display: block!important;
padding-left: 15px;
}
.abriga-news .newsletter .interno:hover{
background: none;
}
.abriga-news .newsletter .input-conteiner{
background: #fff;
padding: 0 0 0 5px;
width: 23%;
margin: 7px 0 0 0;
font-size: 13px;
float: left;
height: 25px;
position: relative;
}
.abriga-news .newsletter input[type=“text”]{
background: none;
border: 0;
box-shadow: none;
padding: 2px 6px;
font-size: 13px;
font-weight: 700;
color: #8f8f8f;
}
.abriga-news .newsletter input::-webkit-input-placeholder {
color: #8f8f8f;
}
.abriga-news .newsletter input::-moz-placeholder {
color: #8f8f8f;
}
.abriga-news .newsletter input:-ms-input-placeholder {
color: #8f8f8f;
}
.abriga-news .newsletter .botao{
background: url(//cdn.awsli.com.br/74/74637/arquivos/seta.png) no-repeat;
border: 0;
font-size: 0;
height: 9px;
width: 13px;
position: absolute;
top: 6px;
right: -8px;
}

@media only screen and (max-width: 979px){
.abriga-news .newsletter .texto-newsletter{
width: 50%;
}

@media only screen and (max-width: 767px){
.abriga-news .newsletter .texto-news{ margin: 0; }
.abriga-news .alinha-left{ width: 45%; }
.abriga-news .newsletter .input-conteiner{ width: 50%; margin: 5px 0 0 0; }
.abriga-news .newsletter .texto-newsletter{ display: none; }
}

@media only screen and (max-width: 479px){
.pagina-inicial .abriga-news{ height: 76px; }
.abriga-news .alinha-left{ width: 100%; }
.abriga-news .newsletter .input-conteiner{ width: 100%; margin: 9px 0 0 0; }
.abriga-news .newsletter .texto-newsletter{ display: none!important; }
}

1 Curtida

Gostaria de ver sua loja para tentar entender esses códigos e suas alterações.

a minha loja http://leticonfeccoes.lojaintegrada.com.br/ mas ja deu certo, muito obrigado

Parabéns Gilson, utilizei seu código e passou sem problemas.
Adorei, será que você me permite utilizá-lo
@jetaplast

Sim, claro.Pode usar sem problemas.

Obrigado, vou efetuar algumas modificações…

Ola poderia me ajudar a deixar os contatos assim:

@Gilson_Pereira Creio que posso te ajudar,

<script type="text/javascript" charset="utf-8" "Adicionar o sinal de maior no final" jQuery('#rodape .institucional .span4:nth-child(3) p').html('
Contato
Qualquer frase.
Titulo
Numero de Contato ou Email
Numero de Contato ou EmailEmail: email
');

Alguem tem o codigo para deixar o newsletter assim?

Tópico movido da categoria BUG para a categoria Personalização layout.