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

GlitchGator
Tourist
3 0 2

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
693 110 158

Hello @GlitchGator, Can you highlights your bugs?

 

0 Likes
GlitchGator
Tourist
3 0 2

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
14101 1641 5054

@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 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
GlitchGator
Tourist
3 0 2

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
14101 1641 5054

@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 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