Change Size of Cross-Sells Columns on Mobile Version

Hi @aandrey88,

On my dev site, the Cross-sells section looks just fine. Refer to this screenshot, please.

Please let us know if there’s a specific step to replicate this.

Kind regards,
Herman ??

Hi @bsfherman,

Thank you for sharing the screenshot.

However, the issue I’m referring to is on the product page, not the cart page. On my site, when viewing a product, the Cross-sells section does not display properly (like here). It seems to have a different size, causing some products to appear misaligned.

Let me know if there’s anything else I can provide to help troubleshoot this issue.

Hi @aandrey88,

It’s Upsells then, not Cross-sells.

Well, it works just fine on my end. Refer to this video, please.

Anyway, I noticed that you are not using the latest version of the Astra theme, which currently is v4.1.6. Please update it and see if it does the trick.

Kind regards,
Herman ??

Hi Herman,

Thank you for clarifying that it’s the Upsells section, not Cross-sells. I appreciate you sharing the video, but unfortunately, it doesn’t provide any insights into the issue I’m facing on my end.

I understand that it may be working fine on your end, but I’ve been experiencing this problem for a few years now, and updating the Astra theme to the latest version doesn’t seem to resolve it.

To give you more context, when I view a product on the live site, the Upsells section appears misaligned and doesn’t display properly, as I shared earlier. It’s been consistent, and I’ve tried different approaches to fix it, but nothing seems to work.

Is there anything specific I should check on my end to troubleshoot further?

Appreciate your assistance!

Hey everyone,

I’ve fixed the upsells display issue on my website with some CSS magic. Here’s the code that did the trick:

@media screen and (max-width: 767px) {
.up-sells ul.products li.product {
width: 48% !important;
clear: none !important;
margin-right: 2% !important;
}

.up-sells ul.products li.product:nth-child(2n) {
margin-right: 0 !important;
}
}

Now the upsells section looks perfect with two rows, two products each, on mobile devices.

Hi @aandrey88,

Good to know that you have found a workaround for this and thank you for sharing it here. Although, it should not necessary in the “normal” condition.

Is it OK if I ask you to export the Astra settings of your site and share it here? I will try to import it to my dev site and I’ll see if I can replicate it. This doc will show you how you can export the Astra settings. Don’t worry, it’s safe as the exported file will contain only the Astra settings of your site, nothing else.

I look forward to hearing from you.

Kind regards,
Herman ??

Hi Herman,

Thank you for your response and understanding. As promised, I’ve exported the Astra settings from my site to a Google Drive link. You can access and download the file using the following link: Google Drive Link

Hi @aandrey88,

Thanks for that. I will try to reproduce this on my dev site. I shall keep this thread updated once I get anything.

Kind regards,
Herman ??

Hi Herman,

You’re welcome! Feel free to reach out if you need any more information or assistance. I’ll be here to help.

Hi @aandrey88,

I am still not able to reproduce this even after importing the Astra settings you shared. Refer to this video, please.

Is there any specific step I missed? Or do you remember something you have done that, probably, causes this?

Kind regards,
Herman ??