Removing white spaces from Supply Theme

Solved
New Member
1 0 0

I'm trying to remove the large gaps between elements in the Supply theme. I've gotten the Header & Logo padding fixed, but can't find what code to change to fix the rest of it. I'm pretty new to CSS, so I'm going slowly to avoid breaking anything.

Areas I want to fix:
--Immediately under the Navigation Bar. 
--Between the Product Title & Image (mobile specifically).

0 Likes

Success.

Community Manager
Community Manager
2498 171 376

Hi there, 

Nick here from Shopify. 

To do this you would need to add some code to the bottom of the theme.scss.liquid file (Admin > Online Store > Themes > Actions > Edit Code). Once here, you can add the following code to remove space between navigation and slideshow:

.main-content {
  padding-top: 0px; 
}

And for removing the space between the product image and title on mobile:

@include at-query($max, $small) {
  #ProductSection {
    & div.product-photo-container {
      margin-bottom: 0;
    }
  }
}

If these code changes are something you are not comfortable with making, not to worry, the Supply theme is a Shopify developed theme and you can reach out our support team directly for help with this here

All the best, Nick

Nick | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
Tourist
8 0 0

hi.

 

I Was encountering a similar problem and used the above code. it removed most of the white space, yet the product images are way small.

 

any ideas on how I can correct the issue? Yungwearz.com

 

Thank You

0 Likes
Astronaut
1088 149 274

In your product.liquid you'll want to look for your divs with the class "grid-item" they have an additional class appended to them, the product image is "large--two-fifths" and the description is "large--three-fifths". Just switch those around so the product image container is "large--three-fifths" and the description is "large--two-fifths" and it will look like the attached photo.

 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
8 0 0

Thank You I made the changes according. now the navigation bar seems to be overlapping the menu items is there any way i can remove itld.PNGCapture.PNGwould like homepage images to be rectangle and wider??a.PNGhow would i go about changing the direction of drop down menu to horizontal??Thank you.

0 Likes
Astronaut
1088 149 274

I see in your theme.scss.liquid there is a style that is overriding the padding for your main content, I'm not sure why this is or if you have added it, but if you remove it the main content will be pushed down. Go into your assets folder and open theme.scss.liquid and look for this:

 

.main-content {
    padding-top: 0px; 
}

I would just comment that out in case there's a reason it's there so you can change it back later. Like this

 

.main-content {
    /* padding-top: 0px; */
}
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tourist
8 0 0

hi

I tried this option but with no success.

any idea why?

0 Likes
Astronaut
1088 149 274

Lol, not sure but I just went to your page and it was completely broken. After you get that fixed, instead of commenting that out you can instead add to the bottom of your theme.scss.liquid:

 

.main-content {
    padding-top: 25px; 
}

This is based on what gets overwritten by the margin: 0px later somewhere in your theme.scss

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like
Tourist
8 0 0

lol, I didn't see that coming, but its all fixed now thank you loads..

0 Likes
Tourist
8 0 0

another question if I may??

 

is it possible to get my drop-down menu, go horizontal instead of vertical?

and also have a click to appear navigation menu, instead of hovehori.PNG

0 Likes