I'm trying to remove the whitespace on minimal theme for mobile version and desktop

Store Design

Topic summary

Goal: remove excess whitespace in Shopify’s Minimal theme on both mobile and desktop.

Context and steps:

  • Multiple members requested the store URL (and password if protected) to inspect the issue. The preview URL was shared.
  • A proposed fix advised adding CSS to assets/theme.scss.css using media queries (CSS rules that apply by screen size).

Proposed CSS:

  • Desktop (@media min-width: 769px):
    • Set padding-bottom: 0 on div#shopify-section-1646798671f4874324.index-section.
    • Set padding-bottom: 0 on div#shopify-section-1646798671f4874324 a.grid-link.
  • Mobile (@media max-width: 768px):
    • Set padding-top: 0 and padding-bottom: 0 on div#shopify-section-1646798671f4874324.
    • Set padding-top: 5px on div#shopify-section-1586197689731 .index-section.slideshow-section.

Latest update:

  • The mobile code resulted in no visible change according to the requester.
  • Notable detail: the mobile CSS includes a malformed property “p adding-bottom: 0px;” which is not valid CSS and could prevent the rule from applying.

Outcome and status:

  • No confirmed resolution yet. Further troubleshooting and correction of the mobile CSS are needed; discussion remains open.
Summarized with AI on February 21. AI used: gpt-5.
1

i’m trying to remove the whitespace on minimal theme for mobile version and desktop

1 Like
2

@Denzel

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@Denzel
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

4

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

5

https://pdxay29rbrwki4sd-27700920402.shopifypreview.com/

6

link here

7

link

8

Please add below css in assets/theme.scss.css file

For Desktop:

@media screen and (min-width: 769px) {

div#shopify-section-1646798671f4874324.index-section {
padding-bottom: 0;

}

div#shopify-section-1646798671f4874324 a.grid-link {
padding-bottom: 0;

}

}

1 Like
9

For Mobile:

@media only screen and (max-width: 768px){

div#shopify-section-1646798671f4874324 {
padding-top: 0;
padding-bottom: 0px ;

}

div#shopify-section-1586197689731 .index-section.slideshow-section {
padding-top: 5px;

}
}

10

mobile code not working i see no change