How do I eliminate extra white space in Minimal Theme?

Technical Q&A
1

Thanks for helping out,

I am now trying to remove extra white space from my website which uses Minimal Theme. www.greekedup.com. Below is an image outlining what I mean. These are all collection covers on the home page.

HELP Fix.png
HELP Fix.png918×840 145 KB

2

Hi @kylew ,

You can solve your problem by trying 2 ways below:

Way 1: Your problem may be caused by your image, so you should upload the image without space white (you can use PTS do that).

Screenshot to refer: https://prnt.sc/119ddrw

Way 2: You can edit the code for your theme.

Steps:

  1. From your Shopify admin, go to Online Store > Themes → Select your theme.

  2. Click Actions > Edit code.

  3. Open the file name “theme.scss” and please place this code at the end of the “theme.scss” file.

@media screen and (min-width: 769px) {

.shopify-section {

padding: 0;

}

.section-header {

padding: 30px 0 0;

}

[data-section-type=“collection-list-section”] .grid-link__image {

height: auto !important;

}

[data-section-type=“collection-list-section”] .collection__grid-image-wrapper > div {

padding-top: 50% !important;

}

[data-section-type=“collection-list-section”] .grid-link__image img {

max-height: 200px !important;

object-fit: contain;

}

}

Screenshot to refer: https://prnt.sc/119dihx

Hope this helps.

3

Hello,

I see what you mean with the images. However, when I tried resizing two they appeared the same when I eliminated the white space. Do you think it wasn’t working because the rest were still messed up. I can eliminate the white from all of the images but don’t want to waste time if it is not going to work.

I also tried the code and it worked decently for the computer, but not on the iphone where most of my customers are.

Thank you for your help in advance,

Kyle