How to delete the white spaces in between the columns?

Shopify Discussion

Topic summary

A Shopify store owner is experiencing unwanted white spaces between columns on their product page and also cannot adjust font size for an image, suspecting it may be hardcoded.

Issue Details:

  • White gaps appear between column elements on the product page
  • Font size for a specific image cannot be modified
  • Store URL provided: audette.store/products/lip-gloss-treatment

Proposed Solutions:
Two community members offered CSS code fixes:

  1. First solution: Add CSS to base.css or custom CSS file targeting specific section IDs with column-gap: 0 !important;

  2. Second solution: Insert CSS code in theme.liquid file within <style> tags, using a media query for screens 750px+ to set column-gap: 0rem !important;

Both solutions target the same section (#shopify-section-template--24305478435115__tab_collage_v3_CYBpTK) but differ in implementation method. The discussion remains open pending confirmation of which solution works.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

withaudette_1-1743066587656.png
withaudette_1-1743066587656.png1054×1158 204 KB

As you can see from the image, there are white spaces in between the columns, does anyone know how to delete them?

1 Like
2

hey @withaudette share the URL of your website so i can help you

3

Hey @withaudette Could you please share the store or page link? This will allow me to inspect it and provide you with a more tailored solution.

4

https://www.audette.store/products/lip-gloss-treatment

I can seem to also change the font size smaller for the image below, seems like it’s coded?

withaudette_0-1743067047773.png
withaudette_0-1743067047773.png1054×1158 10.8 KB

1 Like
5

Hello! @withaudette Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
#shopify-section-template--24305478435115__tab_collage_v3_CYBpTK .tab-collage-v2, #shopify-section-template--24305478435115__image_with_text_v3_wqhheN .image-with-text-v2 .image-with-text__grid {
        column-gap: 0 !important;
    }

HuptechWeb_0-1743067201893.png
HuptechWeb_0-1743067201893.png1186×742 639 KB

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the Accepted Solution.
Best regards
K.K

6 
@media screen and (min-width: 750px) {
    #shopify-section-template--24305478435115__tab_collage_v3_CYBpTK .tab-collage-v2 {
        column-gap: 0rem !important;
    }
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->

AmazingGuy_0-1743067294976.png
AmazingGuy_0-1743067294976.png1280×484 444 KB

if this code work please do not forget to like and mark it solution

1 Like