Codigo Newsletter pop up

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;
}