Small devices – Spacer, Margin and Padding

Home › Forums › Technical Theme Support › STAX Theme › Small devices – Spacer, Margin and Padding

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • December 1, 2025 at 6:00 am #473929
    Dharmesh Patel
    Participant

    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

    December 3, 2025 at 9:24 am #473940
    David Morgan
    Keymaster

    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
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.