Debut theme - Changing the spaces between sections in Mobile vs Desktop View

Highlighted
New Member
3 0 0

I would like to make changes to the spaces above, below and inside these sections and I wanted to know how I can go about doing that.
Also in the mobile view I want the items in my footer to be centered and not left-aligned like they are now.

Example pictures of the mobile and desktop spaces I want to edit are shown below

Screen Shot 2020-09-21 at 11.09.32 AM.jpgScreen Shot 2020-09-21 at 11.06.24 AM.jpgScreen Shot 2020-09-21 at 11.05.55 AM.jpg

0 Likes
Highlighted
Shopify Partner
673 109 148

Hello @RiskyPlan,

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

0 Likes
Highlighted
New Member
3 0 0

Site URL can be found below
My other concern is the imaging scaling when going from Desktop to Mobile because that bottom image I have look to big on desktop and is too small in mobile view

https://babygearco.com/


0 Likes
Highlighted
Shopify Partner
673 109 148

@RiskyPlan,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste below code at bottom of file

.site-footer {
margin-top: 20px !important;
}
.index-section {
padding-top: 10px !important;
padding-bottom: 0px !important;
}

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: wahabahmadghori@gmail.com

 

1 Like
Highlighted
New Member
3 0 0

After using the code you sent me. It helped fix the spaces but it added a new space below the header section.

The issue went away when I remove the "!important" from one of the lines but I dont know what "!important" means or why that happened.

.site-footer {
margin-top: 20px !important;
}
.index-section {
padding-top: 10px ;
padding-bottom: 10px !important;
}

Screen Shot 2020-09-21 at 12.46.11 PM.jpg

0 Likes