How can i make my products the exact same size so the layout looks clean as possible

bally
Tourist
34 0 1

hi, can anyone help on making the layout of the products and picture the exact same so it looks clean on mobile and desktop view instead of different sizes, please see the picture below.

 

im using the theme Focal

Screenshot 2024-06-06 at 15.12.40.png

Replies 10 (10)

AnneLuo
Shopify Partner
614 123 126

Hi, @bally 

Where is the layout on your page? I can't find it.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

bally
Tourist
34 0 1

its Focal theme

store-crafters
Shopify Partner
24 1 1

Hey,

In your store I don't think the issue still persists, but there is an additional issue that if the product title is too long and it shows in too lines then the product card doesn't look good, to fix that you can paste the following code in your theme's css file

tanish_debugger_0-1717658853948.png

 




.ProductItem__Info.ProductItem__Info--center { display: grid; grid-template-rows: repeat(auto-fit, minmax(50px, 1fr)); }

bally
Tourist
34 0 1

this doesn't work. and my page is not in the grid. one product picture is big the other is small i need them look all in one line exactly

store-crafters
Shopify Partner
24 1 1

Are you working on a theme that is not active/published yet?, If yes then share the preview

 

bally
Tourist
34 0 1

yes i am its not published let me send you the preview link now.

 

https://fh4xuuvtd2rm3os1-53316157635.shopifypreview.com

store-crafters
Shopify Partner
24 1 1

.product-item__aspect-ratio{aspect-ratio: 2/3}

place the above code in your css file

bally
Tourist
34 0 1

is it the theme css file?

store-crafters
Shopify Partner
24 1 1

yes

bally
Tourist
34 0 1

still doesn't work