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

Solved
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

Success.

Shopify Partner
1838 173 595

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!

I turn coffee in to code - since 1998
2 Likes
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
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