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

Store Design
1

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

2

Hello @GlitchGator , Can you highlights your bugs?

3

IMG_41E8A86FCAF4-1.jpeg
IMG_41E8A86FCAF4-1.jpeg1125×2436 432 KB

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

1 Like
4

@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
KetanKumar_0-1610557194065.png1920×1080 569 KB

1 Like
5

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!

1 Like
6

@GlitchGator

it’s my pleasure to help us

nothing any change its fine fo your code

7

Hello,

I followed your instruction but it didn’t work.

Can you help me to solve this problem?

Thank You.

1 Like
8

@ummamarkets

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

1 Like
9

Hello,

Thank you for your help.

Please find below my website.

https://www.ummamarkets.com/

Thank You.

1 Like
10

@ummamarkets

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

1 Like
11

Please find the below URL for the issue.

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

Thank You

1 Like
12

@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;
}
1 Like
13

Thank you so much~~~!!!

1 Like
14

@ummamarkets

it’s my pleasure to help us

1 Like
15

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

many thanks

tracey

1 Like
16

@waxaholic

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

17

Thank you for getting back to me :slightly_smiling_face:

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

1 Like
18

@waxaholic

thanks but your store is password protect

19

hello @waxaholic

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

20

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