How to remove white space?

Store Design
, , ,
1

There is a lot of vertical white space on my product pages at the top where the title and description are:

Backstops & Backdrops – AT Sports & Netting (atsportsandnetting.com)

What is the easiest way to reduce the White Space in this area so the text is tightened up vertically?

2 Likes
2

Hi @ATSports

Do you mean like this?

Made4uoRibe_0-1724367323171.png
Made4uoRibe_0-1724367323171.png1526×451 389 KB

if it like this check this one,.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media screen and (min-width: 750px) {
    .collection-hero__description {
        max-width: 100%;
    }
}

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

No, I’m talking about the size of the vertical spacing.

For example, the Title on this page is Backstops & Backdrops.

See how there is a space between that and the paragraph below it? I want to make that space smaller. I also want to tighten up the space below that so the words are closer together vertically. Basically the space between the top of the words to the beginning of the product images needs to be tightened up.

4

Hi @ATSports ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

h1.collection-hero__title {
    margin-bottom: 0 !important;
}

.collection-hero__description.rte {
    margin: 0 !important;
}

Here is result:

BSSCommerceHDL_0-1724371295747.png
BSSCommerceHDL_0-1724371295747.png1161×825 227 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

That looks good but can you lift the product images up a bit to close up the white space there is there?

Also, I tried installing the code above the /head tag on the liquid page you mentioned and it didn’t do anything except show a line of code on the top of the website as in the screenshot here.

Screenshot1.png
Screenshot1.png1920×1080 359 KB

I don’t understand what could be wrong because I did it exactly as instructed.