Размер шрифта не работает при изменении размера страницы - PullRequest
0 голосов
/ 07 апреля 2020

Я пытаюсь ввести с помощью Adobe Target следующий код на нашем рабочем сайте:

//Texto Titulo
let [textoparausuario] = [...document.querySelectorAll('.rst-margin')].filter(item => item.innerText === 'Abra su Cuenta en menos de 5 minutos');
textoparausuario.innerHTML = '<div><div class="sin-salir-de-casa"> <p class="texto1">Sin salir de casa y en menos de 5 minutos</p><p class="texto2">En la distancia, más juntos que nunca</p></div><div class="borderColor"><div style="display: flex;align-items: baseline;"><img src="https://ingdirectspain.experiencecloud.adobe.com/content/dam/mac/ingdirectspain/tx-sin-salir-de-casa/solidicon-information-alert-i.png/_jcr_content/renditions/cq5dam.web.1280.1280.png?ch_ck=1586246579000" style="padding-left: 8px;"><p class="texto3">Para tu tranquilidad, puedes abrir la Cuenta de manera 100% digital </p></div></div>';

var csstitulo = '<style>.sin-salir-de-casa{font-family:INGMe;font-size:24px!important;font-weight:normal;font-stretch:normal;font-style:normal;line-height:1.33;letter-spacing:normal;text-align:center;color:#333;padding-bottom:32px;max-width:1128px}.texto1{font-size:24px!important;line-height:32px!important;margin:0;padding:0!important}.texto2{font-size:24px!important;line-height:32px!important;margin:0;padding:0!important}.borderColor{border:solid #ff6200;border-width:1px!important;max-width:1128px;border-radius:4px;border:solid 2px #559bd1;background-color:#fff}.texto3{font-family:INGMe;font-size:16px!important;text-align:justify;font-weight:normal;font-stretch:normal;font-style:normal;letter-spacing:normal;color:#333;line-height:24px!important;margin:0;padding:8px 16px 8px 8px!important} @media screen and (max-width:55.250em){.sin-salir-de-casa{max-width:732px;font-weight:normal}.borderColor{max-width:732px;}.texto3{max-width:680px}}@media screen and (max-width:18.5em){.sin-salir-de-casa{max-width:296px;font-weight:normal;font-size:16px !important}.borderColor{max-width:296px}.texto3{max-width:224px}.texto1{font-size:16px!important; text-align:center!important}.texto2{font-size:16px!important;text-align:center!important}}</style>';
textoparausuario.insertAdjacentHTML('afterbegin', csstitulo); 

//fixpadding
fixpadding= document.querySelector("#container-steps-flow-process-list > div.container-steps-flow-step-content.active > div > div > div.txt-c > div > div > div.row.account-prospect-welcome-timer-container > div > p");
fixpadding.style.paddingTop ="0px";

Работает нормально. На странице есть стиль по умолчанию, поэтому я использую! Важно, поэтому он не будет использовать его и будет применять только стиль, который я пишу. Проблема в том, что когда я изменяю размер страницы на медиа-экран 18.5 .texto1 и texto2 не получают размер шрифта: 16px, но он получает 24px. Как я могу сделать текст 16px вместо 24px?

С уважением

1 Ответ

0 голосов
/ 07 апреля 2020

Попробуйте добавить

@media screen and (max-width:55.250em) and (min-width:18.51em) 

для первого медиазапроса.

...