Gallery image size larger on mobile view (Minimal Theme)

Solved
Highlighted
Tourist
10 0 3

Hey everyone, so I added an image on the bottom of my site's home screen, as well as added custom code to add it to the bottom of all of my product pages. It looks good when on desktop view, but when I switch to mobile the image gets smaller as well, and becomes almost unreadable on mobile view unless you zoom in. Does anyone know how I can make the image larger on mobile view? Or at least add a different image only for mobile view? 

 

I've attached screenshots of what the image looks like. It's the same result for both the home page and the product pages.

 

 

Capture d’écran, le 2020-06-06 à 17.19.23.pngCapture d’écran, le 2020-06-06 à 17.18.51.png

 

0 Likes
Highlighted
Shopify Partner
4892 725 1572

Hello, @eehamkhan 

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
Tourist
10 0 3

@KetanKumar wrote:

Hello, @eehamkhan 

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



Hi KetanKumar, my site URL is colourizecases.com, and password is colourizecases123

 

Thank you very much! I've tried pretty much everything else at this point.

1 Like
Highlighted
Shopify Partner
4892 725 1572

@eehamkhan 

Thanks for URL

i have checked this issue

you have used only sing image now son i have suggestion can you please upload 4 gallery image each service image much better your both desktop and mobile. 

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
Tourist
10 0 3

Hi, thank you! Works great for the home page! Do you know of any way to do the same result but for the product pages now? I inserted images on product pages using this code: <img src="IMAGE URL GOES HERE">

 

I put that code in the product.liquid template. Right now this is what it looks like:

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
<img src="https://cdn.shopify.com/s/files/1/0402/2475/1781/files/truckpng-01.png?v=1591502742">
<img src="https://cdn.shopify.com/s/files/1/0402/2475/1781/files/returnpng-01-01.png?v=1591502869">
{% section 'product-recommendations' %}
{% include 'product-reviews' %}

As you can see, I tried putting the same code for the image below each other, but the result is that it places the images one on top of the other and makes them huge in size (you can go check out any product page on my website to see what I'm talking about).


@KetanKumar wrote:

@eehamkhan 

Thanks for URL

i have checked this issue

you have used only sing image now son i have suggestion can you please upload 4 gallery image each service image much better your both desktop and mobile. 


 

1 Like
Highlighted
Shopify Partner
4892 725 1572

This is an accepted solution.

Yes, cover image new div tag with a class name much better for customization 

also, add below CSS code after look much better for you

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

 

.gallery__image-container {
    max-width: 200px;
    margin: 0px auto;
}

 

 

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
Tourist
10 0 3

@KetanKumar wrote:

Yes, cover image new div tag with a class name much better for customization 

also, add below CSS code after look much better for you

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

 

.gallery__image-container {
    max-width: 200px;
    margin: 0px auto;
}

 

 



Hi, sorry about that but I'm very new to coding so I didn't understand the first part of what you said (about the div tag). Do you think you could send me specific instructions on what to do?

 

Also, I've added the CSS code you provided to me, but no change to the images in product change, unfortunately. 

0 Likes
Highlighted
Shopify Partner
4892 725 1572

@eehamkhan 

https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts

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
0 Likes