Small devices – Spacer, Margin and Padding

[Dharmesh Patel]

Hi,

How can I control spacer height, margin, and padding to make the pages responsive? For example, the spacer has a height of 100px on desktop view, but when it goes to mobile or smaller screens, I want it to reduce to 25px. The same applies to margin, padding, and block spacing.

How can I achieve that?

Thanks,
Dharmesh

[David Morgan]

Hi Dharmesh,

It would be nice if WordPress implemented some mobile style variations for some of their standard blocks, but they have yet to do so. As a result, the only way to currently do this is to target each block using CSS, and use media queries:

For example:

@media screen and (max-width: 1024px) {
  .wp-block-spacer {
    height: 50px !important;
  }
}

@media screen and (max-width: 768px) {
  .wp-block-spacer {
    height: 25px !important;
  }
}

I hope this helps, thanks!

[Author]

Posts