Fix margin top mobile

[Luxurymrkt]

 

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

thanks!

[niraj_patel]

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 </body> on theme.liquid
<style>
@media only screen and (max-width: 768px) {
.breadcrumb {
margin-top: -62px !important;
}
}
</style>

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

[Luxurymrkt]

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

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

[niraj_patel]

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 </body> on theme.liquid
<style>
@media only screen and (max-width: 768px) {
  .breadcrumb {
     margin-top: unset !important;
  }
}
</style>

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

[BSSCommerce-B2B]

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: 

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!