Fix margin top mobile

Store Design
, , , , ,

Topic summary

A Shopify store owner seeks to reduce the top margin between the header and page content on mobile devices for their collections page.

Proposed Solutions:

Two community members offered CSS-based fixes:

  • niraj_patel suggested adding CSS code to theme.liquid before the </body> tag, targeting elements with negative margin adjustments using media queries for screens under 768px width
  • BSSCommerce-B2B recommended editing the theme.css file directly, adding a media query that applies -50px top margin to .grid.grid--uniform elements on mobile

Both solutions use @media only screen and (max-width: 768px) to target mobile devices specifically.

User Concern:

The original poster asked for clarification about whether the proposed fix would affect breadcrumb spacing on collection pages, indicating concern about unintended layout changes.

Status: The discussion remains open with multiple solutions offered but no confirmed resolution or acceptance marked.

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

Hi I want to reduce the margin between header and start of page on this page https://luxurymrkt.com/collections> > thanks!> >

790FD629-8372-48CE-99AC-60AA624E179F.jpeg
790FD629-8372-48CE-99AC-60AA624E179F.jpeg1170×2532 112 KB

2

Hello @Luxurymrkt

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 only screen and (max-width: 768px) { .breadcrumb { margin-top: -62px !important; } }

niraj_patel_0-1722605182835.png
niraj_patel_0-1722605182835.png317×506 18.5 KB

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

3

This won’t reduce the breadcrumbs on my collection page right?

https://luxurymrkt.com/collections/brunello-cucinelli

4

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 only screen and (max-width: 768px) { .breadcrumb { margin-top: unset !important; } }

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

5

Hi my friend @Luxurymrkt ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin → Online store → Theme > Edit code:

Step 2: Search for the file theme.css. And add this code snippet to the end of the file.

@media only screen and (max-width: 768px) {
  .grid.grid--uniform {
    margin-top: -50px !important;
  }
   nav.breadcrumb {
    margin-top: unset !important;
   }
}

In this step, you can reduce the margin between header and start of page. Simultaneously, display navigation “HOME/ COLLECTIONS”

Step 3: Save and reload home page.

=>> The result:

BSSCommerceB2B_2-1724383754454.png
BSSCommerceB2B_2-1724383754454.png639×970 42.1 KB

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!