Debut Theme Gallery Cutoff

Smedly
Tourist
6 0 3

Hi guys,

 

Anyone have any idea how to make the Debut Theme Gallery Responsive so that the images don't resize depending on the screen size? We'd just like them to be normal squares and not zoom as the page zooms (Or size changes)

 

Thanks.

KetanKumar
Shopify Partner
17365 1874 6488

@Smedly 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

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
Smedly
Tourist
6 0 3

Hey @KetanKumar ! 

 

Thank you so much for your warm welcome. You can find our store page here

 

=> www.avrri.co.uk with the access password M&SHelp!

 

The 3 Gallery blocks underneath the made slider are the issue. I have put them into a constraint, but as you zoom in and out a massive gap between each tile appears, so I put it back. Naturally on mobile this is made worse as there are massive gaps in between. Currently, you can see as you zoom in and out the image is cropped which makes the text un-readable.  If you can offer any advice I can sort this myself. I know it's probably a simple solution that my lack of knowledge is making me miss!

 

I look forward to hear anyones amazing thoughts!

 

 

0 Likes
KetanKumar
Shopify Partner
17365 1874 6488

@Smedly 

is this fine for you?

KetanKumar_0-1615196516194.png

 

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
Smedly
Tourist
6 0 3

Hi @KetanKumar !


Yes, that is exactly how i'd like it when zooming in and out and naturally stacking as the dimensions become too much (On mobile) without a significant gap.

 

I hope thats OK!

0 Likes
KetanKumar
Shopify Partner
17365 1874 6488

@Smedly 

if mobile view after code like this 

KetanKumar_0-1615201530816.png

 

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
Smedly
Tourist
6 0 3

Hey @KetanKumar ,

 

Yes, that's exactly it! Are you able to offer any advice on what we can do with the code here? I'm fearing it's a simple solution i'm missing

 

Kind Regards,

KetanKumar
Shopify Partner
17365 1874 6488

@Smedly 

Thanks for confirming the above solution can you please add this code 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (min-width: 750px) {
#shopify-section-image-bar .image-bar--medium .image-bar__item {
    height: 310px;
}
}
@media only screen and (max-width: 749px) {
#shopify-section-image-bar .image-bar--medium .image-bar__item {
    height: 200px;
}
}

 

 

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
Smedly
Tourist
6 0 3

Hey @KetanKumar !

Thanks so much for your help so far, I really appreciate your time and knowledge.

(I apologise I was away for a little bit, got a bit busy with my other work!)

 

So, on mobile it's perfect! On desktop it's still kinda cropping. Any thoughts on how we can limit this or should I just focus the images into the middle or specific image sizes? I'm happy to mark it as a solution if so

KetanKumar
Shopify Partner
17365 1874 6488

@Smedly 

no rush.

yes, please upload image proper now i have update code 

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