PRODUCT THUMBNAIL SIZE ON MOBILE - BROOKLYN THEME

Highlighted
Excursionist
25 0 0

Hi,

 

Is there any way to change my product thumbnail image so that it would show fully on mobile?

89289397_512807339426992_9162747121772789760_n.jpg

 

I woud like the image to be full so there wont be space highlighted in red.

 

The photo was taken in the Featured Collection section on Homepage

 

Thank you very much

0 Likes
Highlighted

Hello ,

Please share your site url.
So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
25 0 0

Hi 

 

My store URL is:

 

thepawniverse.com

 

Thank you so much for your reply

0 Likes
Highlighted

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(max-width:768px){
.product--image{
    max-width: 100%!important;
}
.product--wrapper {
    max-width: 100%!important;
    width: 100%!important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
25 0 0

Hi,

 

It worked but it seems that only the width is maxed out. The height part still contain white space

 

Can I copy the code and replace with height so that the height of the image will also be maxed out ?

 

Thanks,

0 Likes
Highlighted

Hello ,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and(max-width:768px){
.product--wrapper {
    margin: 0px!important;
}
.grid-product__wrapper {
    margin-bottom: 5px !important;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Excursionist
25 0 0

Hi,

 

This happens when I added the second css. 

88363650_3218966401451050_1216626611319734272_n.png

0 Likes
Highlighted
New Member
1 0 0

Hi there, I am having the same issue as this the topic of this thread. When in mobile view none of my pictures seem full the image box, either on the homepage or the product page. 

My website isn’t live but the URL is www.frenchieslounge.com

Below is an example of what I mean. Can you please help? 

Thank you! 

C0908668-9FD1-4465-9412-A8C547C4192C.png

0 Likes
Highlighted
New Member
1 0 0

Hi,just wondering if you found a solution to this problem. i am having the same issue. Thanks

0 Likes