Mobile Spacing Issue - Supply Theme

Solved
Highlighted
Excursionist
13 0 0

Hello! I'm trying to fix the spacing on my home page between the nav bar - logo- and slider in the supply theme in the mobile view only. Attached is the image of what I'm looking at.

I'm pretty new when it comes to code and I've tried to read through my code a couple times but can't find anything that fixes the mobile padding.

 

Screen Shot 2019-12-13 at 12.32.25 PM.png

0 Likes
Highlighted
Shopify Expert
1380 112 211

Please Share a store url to better assist

Highlighted
Excursionist
13 0 0

Hey Pernnial

 

Here is the store link: https://k87mw2jrcifih53b-3895737.shopifypreview.com

It's currently in development so it's not published.

Thanks!

0 Likes
Highlighted
Shopify Expert
1380 112 211

This is an accepted solution.

Hi @jmer95,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (max-width: 480px){
.header-logo {
margin: 0 auto !important;
}
.main-content {
padding-top: 0px !important;
}
}

 

if any issue let m know

Highlighted
Excursionist
13 0 0

Perfect! Thank you so much!

 

 


@Qualitycheck wrote:

Hi @jmer95,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (max-width: 480px){
.header-logo {
margin: 0 auto !important;
}
.main-content {
padding-top: 0px !important;
}
}

 

if any issue let m know


 

0 Likes
Highlighted
Shopify Expert
1380 112 211

any work in future let m know

feel free to reach out

Highlighted
Tourist
3 0 1

any idea on how to reduce the space between:

  1. the section title and "more" button?
  2. description & price?
  3. Space between bottom of price and line break between sections
  4. Screen Shot 2020-04-05 at 7.29.07 PM.pngScreen Shot 2020-04-05 at 7.29.25 PM.png

 

0 Likes
Highlighted
Excursionist
30 0 5

Has this changed recently? As i tried this and it made no difference to this size on mobile view, id really like to narrow it down as it takes up most of the page

0 Likes
Highlighted
New Member
2 0 1

Removed post

 

 

0 Likes
Highlighted
Explorer
59 4 22

Hello @Qualitycheck,

 

I have the same issue and I have applied your code, but the problem was not fixed!

 

Captura de Pantalla 2020-06-08 a la(s) 8.37.43 p. m..png

 


@Qualitycheck wrote:

Hi @jmer95,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (max-width: 480px){
.header-logo {
margin: 0 auto !important;
}
.main-content {
padding-top: 0px !important;
}
}

 

if any issue let m know


Could you please help me?

 

This is my store link: https://us-women.com

 

Best,

Andi

0 Likes