Вопрос по адаптивной верстке

252

24 мая 2018, 03:40

Сверстал макет, делаю адаптив. Нужно уменьшить заголовки 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>

Answer 1

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

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

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