Изменение размера кнопки CTA и сохранение ее отзывчивости

[Beagent]

ПРИВЕТ,

Я хочу изменить размер кнопки CTA на странице одного продукта, чтобы она соответствовала контейнеру.
Для этого я использовал этот CSS-код:

==
.single_add_to_cart_button.button.alt {
высота: 47,35 пикселей;
ширина: 552 пикселей;
размер шрифта: 25 пикселей;
выравнивание текста: по центру;
}
==

и он отлично работает на экране рабочего стола.
Я добавил этот CSS-код, чтобы сделать кнопку отзывчивой и адаптивной.

==
Экран только @Media и (максимальная ширина: 480 пикселей){
.single_add_to_cart_button.button.alt{
максимальная ширина: 600 пикселей! важно;
ширина: 100% !важно;
}

.single_add_to_cart_button.button.alt а{
дисплей: блокировать ! важно;
размер шрифта: 18 пикселей! важно;
}
}
==

Проблемы следующие:
1. Кнопка подходит к контейнеру на маленьком экране, НО не на экране планшета.
2. Размер шрифта остался таким же, как и на большой кнопке 25 пикселей, он не соответствует размеру кнопки.

Как это исправить, пожалуйста, чтобы:
-> оставить кнопку реагента на всех экранах и сделать ее под размер контейнера?
-> сделать размер текста кнопки адаптивным, чтобы он соответствовал размеру кнопки?

Спасибо.

 

[in_my_veins_]

Если под планшетом вы подразумеваете что-то вроде iPad Mini (и планшетов других подобных размеров), то вам нужно использовать другой @Media. Что-то вроде: @media(max-width:768px){}

Используйте em и % вместо px, чтобы сделать контейнеры и размеры шрифтов более гибкими.

 

[svortlorzor]

Обычно вы хотите, чтобы он естественным образом соответствовал ширине некоторого контейнера, без указания абсолютных размеров, поэтому вы можете сделать что-то вроде следующего:

.single_add_to_cart_button {
дисплей: блок;
выравнивание текста: по центру;
ширина: 100%;

заполнение: 0,25 бэр 0,35 бэр;
размер шрифта: Calc (1rem + 1vw);
}
(медиа-запросы на самом деле должны быть просто аварийным люком, когда вы не можете изменить его размер естественным образом, здесь может потребоваться это в зависимости от того, где кнопка находится в разных макетах)

 

[Машечка]

Так много свидетельств того, что вся кодовая база НЕПРАВИЛЬНА. Пиксельные измерения вместо динамического ЭМ. Фиксированная ширина вместо полужидкой (используйте максимальную ширину вместо ширины), !important указывает на специфичность, черт возьми, шлейфовые классы, вероятно, означают множество «классов ни за что» в разметке...

Тогда есть общий недостаток того, что вы говорите; идея о том, что можно даже сказать «планшет» или «маленький экран», как будто это значимые различия. ОНИ НЕ. Ваши точки останова должны основываться на потребностях контента, а НЕ на каком-то заранее определенном размере пикселей или конкретных устройствах.

Существует так много индикаторов того, что что-то ДЕЙСТВИТЕЛЬНО не так с вашей кодовой базой, и в вашем вопросе не хватает важных данных для создания ответа, это заставляет меня думать, что у вас есть более глубокие проблемы, чем просто реагирование одной кнопки.

Но без разметки, окружающей разметки и т. д. и т. п. все, что любой из нас пытается вам сказать, является дикой догадкой. CSS без разметки, к которой он применяется, а тем более окружающих элементов, которые могут повлиять на его поток, ничего не значит.