Minimize space between these sections

Shopify Discussion

Topic summary

A Shopify store owner needed help reducing excessive spacing between sections on a product page, specifically visible on mobile devices. The standard theme customization gap settings were insufficient to resolve the issue.

Three community members provided CSS solutions:

  • Tech_Coding: Suggested adding custom CSS to the theme.liquid file targeting .icon-with-text elements with margin-bottom: 0 for mobile screens
  • Dan-From-Ryviu: Recommended adding similar CSS code through the theme customizer’s Custom CSS section
  • websensepro: Proposed adding CSS to the theme’s base stylesheet targeting the specific ul.icon-with-text element

All solutions used media queries to apply changes only on mobile/tablet viewports (max-width: 749-768px). The issue was resolved - the original poster confirmed that all three approaches successfully eliminated the unwanted spacing.

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

Hello guys, how can I minimize the space between these sections?

Bildschirmfoto 2025-01-14 um 07.54.06.png
Bildschirmfoto 2025-01-14 um 07.54.06.png644×1252 249 KB

2

Hi @NikosBat

Usually, it can set the gap between sections, so please check in theme Customize or share your store URL so I can check

1 Like
3

Hello Dan-From-Ryviu and thanks for replying. I can’t adjust this from the gap between sections. Here is the url and password:

https://www.nistore.de/products/nistore™-winterhandschuhe

nikthe

4

Hello @NikosBat

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width:767px){ .product__info-container .icon-with-text { margin-bottom: 0 !important; } }

RESULT:

Tech_Coding_0-1736839851960.png
Tech_Coding_0-1736839851960.png318×508 26.5 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like
5

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

@media (max-width: 749px) {
.product__info-container .icon-with-text {
    margin-bottom: 0px;
}
}
1 Like
6

Hi @NikosBat

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
ul.icon-with-text.icon-with-text--horizontal.list-unstyled {
    margin-bottom: 0 !important;
}
}

websensepro_0-1736841883139.png
websensepro_0-1736841883139.png406×495 33.1 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

1 Like
7

Thanks Dan-From-Ryviu, that has helped me

8

Thank you Tech_Coding, that has helped me

9

Thank you Websensepro that has solved my problem