Need Help Removing Unnecessary White Space on Desktop Product Page - Jumpstart Theme

Solved
shopifyhelp10
New Member
3 0 0

Hey Experts!

 

As the title says, I need some help removing this white space on my product page. This only really occurs on desktop, as there is no white space on mobile. I have a attached a photo with lines indicating the space I would like to remove. I am usually pretty good with HTML & CSS but I couldn't figure out how to properly do this without wrecking my entire website.

 

Thanks so much! 

 

Screen Shot 2019-02-26 at 12.06.03 AM.png

 

0 Likes
KarlOffenberger
Shopify Partner
1867 182 812

This is an accepted solution.

Hi,

 

That spacing is defined in the wrapper element which has very generous margins applied to it. It befits the theme if the header / banner is coloured differently than the body, but as you're all white in your theme design, it does look like an awful lot of whitespace.

 

You can control that by editing your theme's style.

 

Step 1

First create a theme backup because style changes are not versioned and in case something does go wrong, you can revert to your backup. Go to Online Store > Themes then click Actions > Duplicate. Done!

 

Step 2

Go to Actions > Edit code and from the editor that loads, open Assets / theme.scss.liquid file. Now find this bit of code (easiest to do by searching for /* -- Site wrapper -- */

 

/* -- Site wrapper -- */

.wrapper {

  max-width: $siteWidth;
  margin: 0 auto;
  position: relative;
  z-index: 99;
  @include clearfix();

  &.wrapper--margins {

    padding: 120px 0 150px;

Step 3

The last line from above code needs to be changed. The 3 values of the padding property are shorthand for TOP MARGIN, LEFT & RIGHT MARGIN, BOTTOM MARGIN so reducing top and bottom margin will give you the desired result i.e.

 

padding: 60px 0 75px;

Hit Save and have a look. Tweak as necessary and check other pages too as this wrapper affects other parts as well.

 

Hope this helps!

Liked this post? You might also like our fantastic upsell apps Candy Rack, Last Upsell post-purchase and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
shopifyhelp10
New Member
3 0 0

Hey! Thanks Karl so much! Looks much better now.


@KarlOffenberger wrote:

Hi,

 

That spacing is defined in the wrapper element which has very generous margins applied to it. It befits the theme if the header / banner is coloured differently than the body, but as you're all white in your theme design, it does look like an awful lot of whitespace.

 

You can control that by editing your theme's style.

 

Step 1

First create a theme backup because style changes are not versioned and in case something does go wrong, you can revert to your backup. Go to Online Store > Themes then click Actions > Duplicate. Done!

 

Step 2

Go to Actions > Edit code and from the editor that loads, open Assets / theme.scss.liquid file. Now find this bit of code (easiest to do by searching for /* -- Site wrapper -- */

 

/* -- Site wrapper -- */

.wrapper {

  max-width: $siteWidth;
  margin: 0 auto;
  position: relative;
  z-index: 99;
  @include clearfix();

  &.wrapper--margins {

    padding: 120px 0 150px;

Step 3

The last line from above code needs to be changed. The 3 values of the padding property are shorthand for TOP MARGIN, LEFT & RIGHT MARGIN, BOTTOM MARGIN so reducing top and bottom margin will give you the desired result i.e.

 

padding: 60px 0 75px;

Hit Save and have a look. Tweak as necessary and check other pages too as this wrapper affects other parts as well.

 

Hope this helps!


 

0 Likes
vincenzoquarta
New Member
3 0 0

@KarlOffenberger wrote:

Hi,

 

That spacing is defined in the wrapper element which has very generous margins applied to it. It befits the theme if the header / banner is coloured differently than the body, but as you're all white in your theme design, it does look like an awful lot of whitespace.

 

You can control that by editing your theme's style.

 

Step 1

First create a theme backup because style changes are not versioned and in case something does go wrong, you can revert to your backup. Go to Online Store > Themes then click Actions > Duplicate. Done!

 

Step 2

Go to Actions > Edit code and from the editor that loads, open Assets / theme.scss.liquid file. Now find this bit of code (easiest to do by searching for /* -- Site wrapper -- */

 

/* -- Site wrapper -- */

.wrapper {

  max-width: $siteWidth;
  margin: 0 auto;
  position: relative;
  z-index: 99;
  @include clearfix();

  &.wrapper--margins {

    padding: 120px 0 150px;

Step 3

The last line from above code needs to be changed. The 3 values of the padding property are shorthand for TOP MARGIN, LEFT & RIGHT MARGIN, BOTTOM MARGIN so reducing top and bottom margin will give you the desired result i.e.

 

padding: 60px 0 75px;

Hit Save and have a look. Tweak as necessary and check other pages too as this wrapper affects other parts as well.

 

Hope this helps!


Hi @KarlOffenberger ,

this don't work for me.

Site url is http://bit.ly/2kodn1b.

Can you help me?

Thanks a lot!

0 Likes
CarlReineke
New Member
1 0 0

Hey Experts!

 

I have finally finished my online shopify shop. I think it looks great, but there are still some white spaces I'd like to remove. I just can't manage to remove the white space next to the product description. My knowledge in HTML is very basic. I have a picture aattached:

68330C4C-E553-44A6-B7B5-02C84057D694.jpeg

If you have any suggestions, I would be more than thankful.

Thank you very much!

0 Likes
Sarvadnya
Tourist
3 0 0

Thank you so much!

0 Likes
prispuddings
Excursionist
27 0 7

Hi

Stockists page - the images are perfect but there seems to be big gaps between each line which weren't there before? https://pris-puddings.myshopify.com/pages/stockists It was all very compact before without big gaps between the image lines and text. Please can you adjust this for me? Also the last logo" the health store" looks very large? Thanks, Pri

0 Likes