brooklyn theme: product pictures on mobile are being cut off

Solved
Highlighted
Explorer
150 4 21

Hi all,

 

When viewing my products on mobile view the tops of the pictures are being cut off by the sticky header

 

Is there a way to drop the picture down so this doesn't happen3

 

mobile.png

0 Likes
Shopify Partner
5885 861 1971

Hello, @jtan 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted

This is an accepted solution.

Hi @jtan,

 

Can you try this code:

@media screen and (max-width: 590px){
.product-single__media-group-wrapper {
 margin-top: 0px!important; 
}
}

You put the code to the end of the theme.scss.liquid file, which you can find within your Shopify Admin > Online Store > Themes > Actions > Edit Code.

 

By the way, it's a nice product, but I suggest you invest more in product images. At least, you need 2 more types of images:

  • Secondary hover images: Images of the products from more angles when hovering the images.
  • In-scale images: Images of the product with its surroundings, for example, when a kid plays with it. This allows people to estimate the actual size of the product.

I suggest you read this article to understand more about what to include and how to optimize product pages. Personalize Your Product Page

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
1 Like
Highlighted
Explorer
150 4 21

hi Ketan

 

www.thetinycrate.com.au

 

ps: Jesstan21

 

 

0 Likes
Highlighted
Shopify Partner
5885 861 1971

This is an accepted solution.

@jtan 

Thanks for URL.

1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.

body:not(.template-index) .main-content {
    padding-top: 80px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Explorer
150 4 21

thanks victor i appreciate the help and tips 

1 Like
Highlighted
Explorer
150 4 21

thanks for the response again Ketan

 

it worked perfectly

0 Likes