0

Сверстал макет, делаю адаптив. Нужно уменьшить заголовки h2 и отступы padding(top и bottom в каждой секции). Так как отступы в каждой секции разные, хочу уменьшить их синхронно(на одинаковое количество px, что бы они оставались разными) и отдельно уменьшить заголовки h2(т.е на другое количество px, нежели отступы). Как это сделать ???

Код примерно такой -->

<section class="one">
  <h2 class="h2_one">...</h2>
  <p class="paragraph_one">...</p>
</section>

<section class="two">
  <h2 class="h2_two">...</h2>
  <p class="paragraph_two">...</p>
</section>

<section class="three">
  <h2 class="h2_three">...</h2>
  <p class="paragraph_three">...</p>
</section>

<section class="four">
  <h2 class="h2_four">...</h2>
  <p class="paragraph_four">...</p>
</section>

12
  • Задавать отступы и размеры шрифта в относительных единицах измерения, а не в пикселях
    – user212578
    17 мая 2018 в 10:46
  • Хотелось бы нагляднее
    – Topik
    17 мая 2018 в 10:51
  • Третий день не могу решить, как сделать наилучшим образом
    – Topik
    17 мая 2018 в 10:52
  • learn.javascript.ru/css-units
    – user212578
    17 мая 2018 в 10:53
  • Это не помогло мне, я знаю как работают эти единицы
    – Topik
    17 мая 2018 в 10:58

1 ответ 1

0

Здраствуй! для простоты работы в таких случаях создавай дополнительные классы. В частности рекомендую использовать БЭМ методологию и почитать статью организация отступов в верстке. В твоем случае можно здлеать так:

1) Добавить для секции класc .section 2) Сделать универсальный клас для заголовков например .section__title 3) для каждого тайтла добавить модификатор .section__title--one, .section__title--two и тд.

и так каждый на определенном брейкпоинте адаптировать.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.