Вопрос: Block id h1 размер шрифта для телефонов - PullRequest
Новая
       76

Вопрос: Block id h1 размер шрифта для телефонов

0 голосов
/ 10 июля 2020

Я пытаюсь реализовать код на домашней странице моего веб-сайта Squarespace, чтобы увеличить размер «Soph and Mat» www.thedistancelive.com только на мобильных устройствах. Я пробовал следующее: 

@media only screen and (max-width:640px) {
       #block-yui_3_17_2_1_1594350948064_7952 {
        font-size: 35px;
        line-height: 35px;
        padding-bottom: 20px;
    margin-top:10px;
  }
}

@media only screen and (max-width: 767px){
  #block-yui_3_17_2_1_1594350948064_7952, .index-section-wrapper h1 {
    font-size: 80px;
    line-height: 35px;
    padding-bottom: 20px;
    margin-top:10px;
  }
}

Поля сверху / снизу работают, но размер шрифта не меняется.

Кто-нибудь может помочь, пожалуйста? Спасибо х

1 Ответ

0 голосов
/ 10 июля 2020

Проблема связана с тем, что CSS переопределяется правилом с более высокой специфичностью и использованием !important. Это не является типичным в Squarespace, где правила написаны на основе стиля и выбора шаблона, сделанного в серверной части, создавая CSS правил с относительно высокой специфичностью.

В таких случаях следует использовать инструменты разработчика браузера / инспектор , чтобы просмотреть рассматриваемое правило. Затем можно написать правило равной или большей специфичности, чтобы переопределить значение по умолчанию CSS.

Для этого:

  1. При просмотре страницы сужайте ширину вашего браузера до тех пор, пока включены мобильные стили.
  2. Щелкните правой кнопкой мыши нужный элемент. В данном случае это H1.
  3. Выберите «Проверить» (или «Проверить элемент» в Firefox и других браузерах).
  4. На одной из панелей вы увидите CSS, который применяется к целевому элементу (в данном случае H1). Найдите активное правило, устанавливающее размер шрифта.

enter image description here

5. Based on that rule, write your own rule of equal or greater specificity and priority. Something like this:

@media only screen and (max-width:640px) {
  .index-section-wrapper .content.has-main-media #block-yui_3_17_2_1_1594350948064_7952 h1:not(.OT_title) {
    font-size: 35px !important;
  }
}

6. Add the rule via Пользовательский CSS / CSS Редактор .

Есть и другие способы записи правило более конкретное, чем в примере выше. Это всего лишь один пример.

...