Gallery image size larger on mobile view (Minimal Theme)

Solved
eehamkhan
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
KetanKumar
Shopify Partner
20430 2114 7676

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eehamkhan
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.

KetanKumar
Shopify Partner
20430 2114 7676

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eehamkhan
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. 


 

KetanKumar
Shopify Partner
20430 2114 7676

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
eehamkhan
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
KetanKumar
Shopify Partner
20430 2114 7676

@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 Partner | 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
jbbplants
New Member
2 0 2

Hi there Ketan. I am having a similar issue with my site using the minimal theme. https://jbbexoticplants.ca/ password is plants1393 

Screen Shot 2021-06-17 at 11.05.22 AM.pngScreen Shot 2021-06-17 at 11.05.40 AM.png

so the first photo is what i have, its a gallery with two "photos" one is a photo, and the other i have designed a little blurb with writing but thats also an image, however in mobile it shrinks both to put them together making it too small to read. 

in the second photo, when i attach a third photo to the gallery, it stacks the images, which is ideal. however i do not want a third photo at all as it is not optimal in desktop and not preferred. 

is there any way that i can make the images stack with two photos?  

also above this section, i have another gallery working and stacking fine (just stating this for coding, classes, id purposes) 

thank you so much!

KetanKumar
Shopify Partner
20430 2114 7676

@jbbplants 

sorry for that issue please add this code

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

@media (max-width:767px) {
.featured-images .grid__item {width: 100%;}
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing