Refresh theme - remove space between banner and button

zoose
Tourist
5 0 1

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

Reply 1 (1)

Mgroup
Shopify Partner
38 7 10

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:


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.

Thanks,
Mgroup Development