How to line up Product Images and Titles? | Debut Theme

GlitchGator
Excursionist
13 0 8

I want all my product images and text to be lined up and uniform throughout the website. Right now it looks fine on desktop, but it is messed up on mobile. How can I fix this?

My website - Bakegomo.com

 

0 Likes
Wahab_Ahmad
Shopify Partner
718 112 174

Hello @GlitchGator, Can you highlights your bugs?

 

0 Likes
GlitchGator
Excursionist
13 0 8

IMG_41E8A86FCAF4-1.jpeg

@Wahab_Ahmad I'm not sure what you mean, but I'd to line up product images and titles even when they are differing in size. I've posted a pic of how it is on my website for mobile currently.  

KetanKumar
Shopify Partner
20470 2116 7716

@GlitchGator 

Thanks for clear your bug

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 change after 5-6 second

@media only screen and (max-width: 749px) {
.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image {
    height: 100%;
    object-fit: contain;
}
}

Afte code this view

KetanKumar_0-1610557194065.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 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
GlitchGator
Excursionist
13 0 8

Awesome! That worked perfectly.

If I would also want things to be lined up automatically on the desktop, is there anything else I would need to add? 

Or would this piece of code be sufficient?

Thanks!

KetanKumar
Shopify Partner
20470 2116 7716

@GlitchGator 

it's my pleasure to help us

nothing any change its fine fo your 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 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
ummamarkets
Tourist
4 0 4

Hello, 

I followed your instruction but it didn't work. 

Can you help me to solve this problem? 

Thank You. 

KetanKumar
Shopify Partner
20470 2116 7716

@ummamarkets 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you 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
ummamarkets
Tourist
4 0 4

Hello, 

Thank you for your help. 

Please find below my website. 

https://www.ummamarkets.com/

Thank You. 

 

KetanKumar
Shopify Partner
20470 2116 7716

@ummamarkets 

thanks for it which page do you have facing this issue please share particular page url.

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