Refresh theme - remove space between banner and button

[zoose]

Hi

How do I reduce the space above and below the "button" of my Image Banner, in Mobile view, so it kind of sits just below with reasonable spacing.

I have attached a photo.

Thanks

[Mgroup]

Hi Zoose!

Unfortunately, I can't see the attached photo.

But when we talked about the top/bottom space, between some elements, we can use different types of techniques to achieve this.

1. Margin
This property can be used to set a margin on all four sides of an element. Margins create extra space around an element.

2. Use the display property. Namely, display: flex; or display: grid;
They have additional options that allow you to create the right space between elements.

Read more about this in the documentation below:

• display
• flex
• justify-content
• grid

Also, you mention that it should work only in mobile view. To achieve this, you can add media queries, for example:

@media (min-width: 768px) {
  display: none;
}

This CSS will only apply styles if the width of your browser's viewport is equal to or greater than 768px.


If we're talking about your situation, it's the styles that can work for you.

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

@media (min-width: 768px) {
  display: none;
}

P.S. It will only work on devices with a width of less than 768 pixels.


I hope that my answer helps you to resolve the issue. If you need a more detailed explanation or further help - just contact me.