How can I minimize the space here only in mobile version

Shopify Discussion

Topic summary

A Shopify store owner sought help reducing excessive white space on their mobile product page, sharing a screenshot showing the spacing issue.

Resolution Process:

  • Multiple helpers requested store access credentials to diagnose the problem
  • The original poster provided their password-protected store link and password
  • A solution was provided involving custom CSS code

Technical Solution:
Add CSS media query targeting mobile devices (max-width: 749px) to the theme’s stylesheet (base.css, style.css, or theme.css):

@media only screen and (max-width: 749px){
.collapsible-content-wrapper-narrow .accordion {
    margin-top: 0;
}
}

This removes top margin from accordion elements in the collapsible content area on mobile devices only.

Outcome: The CSS solution successfully resolved the spacing issue, confirmed by the original poster.

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

Hello guys, how can I minimize the space here only for mobile.

Bildschirmfoto 2024-12-27 um 02.39.37.png
Bildschirmfoto 2024-12-27 um 02.39.37.png602Ă—1156 179 KB

1 Like
2

Hi @NikosBat

Please share your link and password-protected of your store so I can give you the code to do that.

1 Like
3

Hey @NikosBat

Your website is password protected, share your password as well.

Best Regards,

Moeed

1 Like
4

Hello Dan-From-Ryviu, here is the link and password : https://www.nistore.de/products/nistore™-winterhandschuhe, fsfbnsikdfn

5

Hello Moeed, here is the link and password : https://www.nistore.de/products/nistore™-winterhandschuhe, fsfbnsikdfn

6

Hi @NikosBat

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.collapsible-content-wrapper-narrow .accordion {
    margin-top: 0;
}
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
7

Thanks Made4uo-Ribe, that solved my problem

1 Like