How to edit Margin bottom of the featured collections in the Brooklyn theme

Store Design
1

https://vancemartins.com/

I have used a custom image template so I can have custom photos for mobile and desktop although when viewing on mobile my photo clashes with the featured collection. Is there a way to add a margin-bottom to the featured collection to remove this problem?

If possible can you post the required code and area.

Thanks in advance

IMG_3191.PNG
IMG_3191.PNG1242×2688 212 KB

1 Like
2

@Baileyatk13

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

1 Like
3

@KetanKumar
this only seems to be a problem when viewing on mobile phone. When I view it on the preview mode on Shopify it doesn’t show but only when I go onto the website via my iPhone 11 Pro Max it is present. Both safari and chrome browsers have been tried.

4

@Baileyatk13

ok can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
#shopify-section-16243710393ff97216 {margin-top: 90px;}
}
2 Likes
5

@KetanKumar
This worked although I only needed the last line of code as the problem only solved it for some screen sizes.

Thanks for your help although

1 Like
6

@Baileyatk13

it’s my pleasure to help us

1 Like