reduce white space between all sections in mobile version on Debut theme

Solved
Highlighted
Tourist
20 0 1

I am trying to optimize my site for mobile as most of my visitors use mobile. There is a lot of white space between the different sections - hero image, featured product, slideshow etc. I know i would have to create a media query for this but i'm struggling with the right code and where to place it.

Can anyone assist with the right code?

0 Likes
Highlighted

This is an accepted solution.

Hello @kellybanelli,

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

@media only screen and (max-width: 750px) {
.index-section {
    padding-bottom: 45px;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
20 0 1

ahhhhhh! thank so much! this was annoying the hell out of me:)

 

Thank you!

0 Likes
Highlighted
New Member
3 0 0

didnt work for me. still big spaces below image in product page on mobile.

0 Likes
Highlighted

Hello jjelderks,
Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

I was able to recode and fix many of the white space issues with suggestion in the forum. However, I have one that I am stuck on. On the mobile version, I have huge white space in the blog between the image and the subtitle. Website is here www.caskai.com.  See snippet image below.

 

jjelderks_0-1598447258669.png

 

0 Likes
Highlighted
Tourist
8 0 1

Didn't work for me

Do you have any other suggestions? I'd be incredibly grateful

0 Likes
Highlighted
Tourist
8 0 1

I've got exactly the same problem. Were you able to fix it and offer any tips? I'd be incredibly grateful 

0 Likes
Highlighted
New Member
3 0 0
It depends on where the white space is occurring. There is not a single
global fix for the issue. I had to compile different fixes in the
suggestions to apply to each section I was having an issue with. Some
worked, others did not. It was a lot of trial and error.

Let me know which sections you are having the problem with and I can tell
you how I approached each.
0 Likes
Highlighted
Tourist
8 0 1
This is the issue I’m having. See attached photo. At the top of my home
page I have slideshow with an image. Directly below it I have wording typed
in another slideshow. This was the only way I could get text there.
The gap in between with white space is huge. It’s fine on desktop but on
mobile it’s really not great

0 Likes