How to reduce space between header, product image and product gallery?

Store Design
, ,
1

Hi All,

I need to reduce the space between header, product image and product gallery on mobile version:

joaomenterprise_0-1722810560893.png
joaomenterprise_0-1722810560893.png389×702 60.5 KB

The above spaces marked on red, how can I do it?

site: www.printiport.com

Thanks in advance.

2

Hi @joaomenterprise ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

3

Hi @joaomenterprise

Please follow these steps:

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.
  3. Open the file assets/base.css and find the following snippet:
@media screen and (max-width: 749px) {
    .grid--peek.slider--mobile {
        margin: 0;
        width: 100%;
    }
}
  1. And update it like this:
@media screen and (max-width: 749px) {
    .grid--peek.slider--mobile {
        margin: 0;
        width: 100%;
        height: 100vw;
    }
}

Please let me know if you have any concern.

Regards,

Vinh