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

Solved
kellybanelli
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

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;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
kellybanelli
Tourist
20 0 1

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

 

Thank you!

0 Likes
jjelderks
New Member
3 0 0

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

0 Likes

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

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
jjelderks
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
batecolifestyle
Tourist
9 0 2

Didn't work for me

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

0 Likes
batecolifestyle
Tourist
9 0 2

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

0 Likes
jjelderks
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
batecolifestyle
Tourist
9 0 2
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