FROM CACHE - en_header

Images are cut off on Mobile View: Too many selection dots

Solved
BearEssentials
Tourist
5 0 1

Hello,

 

My images in Brooklyn theme are cut off when viewing on Mobile because of the selection dots.

I’ve tried removing a number of images but the issue is pretty constant. Is there any way to change this? 

 

My store is: https://the-bear-essentials-outdoors-co.myshopify.com

 

Please see the picture below:

 

Screen Shot 2021-11-26 at 10.15.30 AM.png

 

Thank you in advance!

Accepted Solution (1)

Accepted Solutions
Sheesh_b
Shopify Partner
356 77 83

This is an accepted solution.

Hey @BearEssentials 

Your theme is old version compare to the newest version and they updated this issue in the new theme but as you have old theme you can add below code on your theme.liquid template just after <head>.

<style>
.template-product ul.slick-dots {
	position: relative;
}
</style>

 

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com

View solution in original post

Replies 9 (9)
Sheesh_b
Shopify Partner
356 77 83

Hi,

See the below picture and change the '300x300' to 'x300'.

This will force all the image to use the same height and no image will cut.

Let me know if that works for you.

Screenshot_33.png

 

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com
BearEssentials
Tourist
5 0 1

I can’t seem to find the Media.Liquid file in the Brooklyn Theme?

 

Screen Shot 2021-11-26 at 1.12.46 PM.png

Sheesh_b
Shopify Partner
356 77 83

Hi
You can find media.liquid under 'Snippets'.

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com
BearEssentials
Tourist
5 0 1

Thank you for your help!

 

However, under SNIPPETS there isn’t exactly a media.liquid file. Closest thing I can find to the screen you showed me is the “product-grid-item.liquid”. 

 

under here I changed the SRC (150x150x) to x150 and x300 as a test but nothing changed. 

 

Screen Shot 2021-11-26 at 1.44.29 PM.png

Sheesh_b
Shopify Partner
356 77 83

Okay, I got it.

In your case it is image-style.liquid.

Select that template and find 'product-single__photo-wrapper' class and change '300x300' to 'x300'.

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com
BearEssentials
Tourist
5 0 1

Gotcha,

 

The exact line isn’t there, here’s what my screen looks like to edit.

 

Screen Shot 2021-11-26 at 1.54.50 PM.png

Sheesh_b
Shopify Partner
356 77 83

Hey @BearEssentials 

This seems not working this way.
If you don't mind can you share the theme zip so I can check it on my test store.

Use this link https://wetransfer.com/ to transfer safely and sent it to reverseweb.corp@gmail.com.

 

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com
BearEssentials
Tourist
5 0 1

Thank you! Just transferred!

Sheesh_b
Shopify Partner
356 77 83

This is an accepted solution.

Hey @BearEssentials 

Your theme is old version compare to the newest version and they updated this issue in the new theme but as you have old theme you can add below code on your theme.liquid template just after <head>.

<style>
.template-product ul.slick-dots {
	position: relative;
}
</style>

 

Shopify Web Store Developer | Connect For Customization sheesh@impulsebyte.com
LIKE or mark as ACCEPTED SOLUTION
My Recent Works: | https://www.shopunmasked.com | https://le-fix.com | https://www.gomez-gracia.com | https://beyondbyronebikes.com.au | https://bunkysofa.com