Bullet Theme Reduce Empty Blocks

Topic summary

A user is experiencing unwanted empty spaces/blocks on their product page and seeking help to remove them.

Initial Solutions Attempted:

  • First response suggested adding code to theme.liquid file above the </body> tag, but this didn’t work
  • Second responder provided CSS code targeting specific elements to hide empty paragraph blocks and adjust slider gallery heights for different screen sizes

Current Status:

  • The CSS solution partially worked, fixing empty space at the top of the page but not the bottom
  • The helper acknowledged the limitation, noting they adjusted code for desktop, tablet, and mobile views
  • Recommendation: Hire a developer for a more comprehensive, pixel-perfect solution across all screen sizes

Technical Approach:
Both solutions involve editing theme files (theme.liquid or main.css/base.css) through the Shopify admin’s “Edit Code” section, using CSS display properties and media queries to hide or resize problematic elements.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

I have some empty spaces on my product page and would like to fix them. Please see my page and the one i’m trying to get it to look like.

1 Like

Hey @ouani

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag


RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

Hello, this didnt work.

Hi @ouani

Do you mean like this?

If it is check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
x-cell#Slide-template--18202571473145__main-35343534719225 {
    outline: none;
    height: 100%;
}

@media only screen and (min-width: 1400px) {
    x-flex#Slider-Gallery-template--18202571473145__main {
        height: 100vh;
    }
}

@media only screen and (max-width: 1399px) and (min-width: 749px) {
    x-flex#Slider-Gallery-template--18202571473145__main {
        height: 70vh;
    }
}

.text.rte p:nth-child(1), 
.text.rte p:nth-child(3), 
.text.rte p:nth-child(9) {
    display: none;
}
  • And Save.

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

Thank you for this response, it only fixed the top, not the bottom.

Yes, I’ve already assume on that I aldready change into desktop> tablet> mobile. To make it more perfect you need to hire a developer to change every screen into perfect fit. Thanks!