Photos misaligning on desktop collection pages on wide screens

Solved

Photos misaligning on desktop collection pages on wide screens

toddhart
Tourist
9 0 2

Hi all,

 

Just wondering if anyone can help with some code to help with these photos misaligning on desktop?

It only happens on wider screens, and they realign when you make the window smaller. The photos are all the same aspect ratio etc.

My theme is Prestige version 9.0.2

Website: Neilo Graders | Unprecedented Precision

 

toddhart_0-1715836508434.png

 

Would appreciate any assistance or direction 🙂

 

Accepted Solutions (2)

Liquid_xPert_SJ
Shopify Partner
1381 143 216

This is an accepted solution.

@toddhart 

you need to put the below css code into your theme.css file

.collection__main .product-card .product-card__image {
	width: 100% !important;
}

 

Online Store > Edit Code > assets  > theme.css file place the code at very bottom and hit save.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Liquid_xPert_SJ
Shopify Partner
1381 143 216

This is an accepted solution.

@toddhart 

here is your code, you need to put the below css code into your theme.css file

🙂

.product-list .product-card .product-card__media img {
	width: 100% !important;
}

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 4 (4)

Liquid_xPert_SJ
Shopify Partner
1381 143 216

This is an accepted solution.

@toddhart 

you need to put the below css code into your theme.css file

.collection__main .product-card .product-card__image {
	width: 100% !important;
}

 

Online Store > Edit Code > assets  > theme.css file place the code at very bottom and hit save.

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
toddhart
Tourist
9 0 2

Hi Liqiud_xPert_SJ

 

Thanks for your help with the other issue above. Are you able to help me with a similar issue on the home page? 

When the collection list gets too wide, the photos misalign here again.

 

Screenshot 2024-06-06 125800.png

Is there a way I can fix that?

 

LMK 🙂

Liquid_xPert_SJ
Shopify Partner
1381 143 216

Yes sure I can do that for you give me a while to write code for it. Thank you for get in touch

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Liquid_xPert_SJ
Shopify Partner
1381 143 216

This is an accepted solution.

@toddhart 

here is your code, you need to put the below css code into your theme.css file

🙂

.product-list .product-card .product-card__media img {
	width: 100% !important;
}

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
- Need THEME UPDATES but have custom codes? No worries, for an affordable price.