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

GlitchGator
Excursionist
13 0 10

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

 

Replies 19 (19)

Wahab_Ahmad
Shopify Partner
773 114 200

Hello @GlitchGator, Can you highlights your bugs?

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Chat on WhatsApp .
Feel free to contact me Email : wahabahmadghori@gmail.com |
Buy Me A Coffee
GlitchGator
Excursionist
13 0 10

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
36839 3635 11972

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

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
36839 3635 11972

@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
Najjar1994
Visitor
3 0 0

Hi

I tried to do the same thing in my store but it didn't work! could you help me to solve it ?

 

www.animixq.com

 

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
36839 3635 11972

@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
36839 3635 11972

@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
ummamarkets
Tourist
4 0 4

 

Please find the below URL for the issue. 

https://www.ummamarkets.com/collections/snack-chips

Thank You

KetanKumar
Shopify Partner
36839 3635 11972

@ummamarkets 

great, Thanks 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

.grid-view-item__image-wrapper div {
    padding-top: 100% !important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
height: 100%;
    object-fit: contain;
}

 

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

Thank you so much~~~!!!!!

KetanKumar
Shopify Partner
36839 3635 11972

@ummamarkets 

it's my pleasure to help us

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
waxaholic
Visitor
2 0 2

hi I've tried the code it didn't work is there another solution?

 

many thanks

tracey

KetanKumar
Shopify Partner
36839 3635 11972

@waxaholic 

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
waxaholic
Visitor
2 0 2

Thank you for getting back to me 🙂

    https://waxaholic-shop.myshopify.com/

Also under the shop heading i have different pages but all my products seem to be duplicated across all the pages rather than just under wax melts how do i add products separately to the other pages (christmas advent calendar, wax burners?) 

many thanks for your help 

KetanKumar
Shopify Partner
36839 3635 11972

@waxaholic 

thanks but your store is password protect

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
Kinjaldavra
Shopify Partner
2302 570 1422

hello @waxaholic 

your store is password protected then also provide a password So I will check and provide a solution here.