brooklyn theme: product pictures on mobile are being cut off

Solved
Highlighted
Trailblazer
158 4 22

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
Highlighted
Shopify Partner
8741 1159 3071

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

PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
- [Master Guides]: Get Your Shopify Store Ready for Black Friday
1 Like
Highlighted
Trailblazer
158 4 22

hi Ketan

 

www.thetinycrate.com.au

 

ps: Jesstan21

 

 

0 Likes
Highlighted
Shopify Partner
8741 1159 3071

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
Trailblazer
158 4 22

thanks victor i appreciate the help and tips 

1 Like
Highlighted
Trailblazer
158 4 22

thanks for the response again Ketan

 

it worked perfectly

0 Likes
Highlighted
New Member
1 0 0

Hey everyone. I've been trying for days to fix my website pictures. so on mobile my collection pictures are being cut off and the letters do not show. Ive tried everything, resizing, bringing the words up and still nothing... Please help! again the issue is just on mobile

0 Likes