Codigo Newsletter pop up

Layout
1

Olá, alguem poderia me ajudar com uma duvida;
Modifiquei o codigo da pop up newsletter, e ficou muito bom quando abre a loja pelo PC.
Porém ficou grande para a tela dos celulares e a pessoa que entrar na loja pelo mobile tem q arrastar pro lado pra fechar a pop up. Será que alguem pode criar, ajustar, ou me dar uma ajuda de como faço para que fique bacana tanto no pc quanto no mobile?

Vou colar o codigo para analise. (no momento nao estou usando ele, estou tentando trabalhar isso, mas tem anos q nao mexo em css e tô me batendo um pouco) Desde ja , grata

#modalNewsletter .componente {
background: url(“https://cdn.awsli.com.br/413/413797/arquivos/bannerinicio-250fretegratis.jpg”);
width: 585px;
height: 444px;
}
#modalNewsletter .componente .interno {
padding: 18px;
padding-top: 240px;
padding-right: 81px;
background-color: transparent;
}

#modalNewsletter .newsletter input[type=“text”] {
width: 92%;
margin: 0;
}

#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
margin-right: 0px;
}
div.fancybox-skin {
padding: 10px !important;
}
div.fancybox-wrap.fancybox-desktop.fancybox-type-html.modal-modalNewsletter.fancybox-opened {
width: 620px !important;
height: 464px !important;
left: 50% !important;
margin-left: -290px !important;
}
div.fancybox-inner {
width: auto !important;
height: auto !important;
}
#modalNewsletter .componente .titulo {
font-size: 25px;
margin-bottom: 15px;
color: Transparent;
}
#modalNewsletter .componente .texto-newsletter {
font-size: 15px;
color: transparent;
}
#modalNewsletter .icon-envelope-alt:before {
content: “\f003”;
color: transparent;
}
#modalNewsletter .icon-chevron-right:before {
content: “\f054”;
color: white;
}
#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
}
#modalNewsletter .newsletter .input-conteiner input {
height: 15px;
font-weight: 400;
font-style:opensans;
}
#modalNewsletter .newsletter .input-conteiner {
margin-top: 20px;
margin-left: 68px;
}
#modalNewsletter .componente .interno:hover {
background-color: transparent;
}

#modalNewsletter .newsletter .newsletter-confirmacao span {
font-size: 20px;
line-height: 89px;
}
.newsletter .newsletter-confirmacao .icon-ok {
float: left;
color: green;
margin-top: 31px;
}
.newsletter .newsletter-confirmacao span {
display: block;
margin-left: 41px;
padding: 5px 0;
}
.alert-danger, .alert-error {
background-color: #d2d2d2;
color: #b94a48;
margin-top: 22px;
}

2

mano edita a largura para mobile. é só colocar seu css aqui dentro:
@media (max-width: 992px) {
CSS AQUI
}}
no caso esse codigo faz pegar celular e tablet, quiser escolar é só editar a quantidade de pixel

3

Ola Macael , como inserir este codigo CSS? Pode explicar novamente. Obrigado

4

O código inteiro ficaria nessa forma aqui
Copiei o código css da @Gabi.g2 e coloquei dentro do código @micael_santana

@media (max-width: 992px) {

#modalNewsletter .componente {
background: url(“https://cdn.awsli.com.br/413/413797/arquivos/bannerinicio-250fretegratis.jpg ”);
width: 585px;
height: 444px;
}
#modalNewsletter .componente .interno {
padding: 18px;
padding-top: 240px;
padding-right: 81px;
background-color: transparent;
}

#modalNewsletter .newsletter input[type=“text”] {
width: 92%;
margin: 0;
}

#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
margin-right: 0px;
}
div.fancybox-skin {
padding: 10px !important;
}
div.fancybox-wrap.fancybox-desktop.fancybox-type-html.modal-modalNewsletter.fancybox-opened {
width: 620px !important;
height: 464px !important;
left: 50% !important;
margin-left: -290px !important;
}
div.fancybox-inner {
width: auto !important;
height: auto !important;
}
#modalNewsletter .componente .titulo {
font-size: 25px;
margin-bottom: 15px;
color: Transparent;
}
#modalNewsletter .componente .texto-newsletter {
font-size: 15px;
color: transparent;
}
#modalNewsletter .icon-envelope-alt:before {
content: “\f003”;
color: transparent;
}
#modalNewsletter .icon-chevron-right:before {
content: “\f054”;
color: white;
}
#modalNewsletter .newsletter .botao {
font-size: 21px;
padding: 7px 10px;
}
#modalNewsletter .newsletter .input-conteiner input {
height: 15px;
font-weight: 400;
font-style:opensans;
}
#modalNewsletter .newsletter .input-conteiner {
margin-top: 20px;
margin-left: 68px;
}
#modalNewsletter .componente .interno:hover {
background-color: transparent;
}

#modalNewsletter .newsletter .newsletter-confirmacao span {
font-size: 20px;
line-height: 89px;
}
.newsletter .newsletter-confirmacao .icon-ok {
float: left;
color: green;
margin-top: 31px;
}
.newsletter .newsletter-confirmacao span {
display: block;
margin-left: 41px;
padding: 5px 0;
}
.alert-danger, .alert-error {
background-color: #d2d2d2;
color: #b94a48;
margin-top: 22px;
}
}}

5

Oi Camila , tudo bem? obrigado pelo cuidado em ajudar.
To precisando agora fazer o newsletter pop up ficar numa posiçäo de espaço para colocar paa colocar uma imagem na esquerda e restante em branco no quadro pop up. Onde controlo esta posicao da imagem no po up