Adjust the responsiveness of the upsell element

[zipe3]

Hello, I use the upsell element on my product template. But my client would like that on the cellular version there are still 4 columns wide like on the computer version. I searched in the css, tried to make a looper (to make it easier to adjust everything to different widths) which called the upsell but without success. Can you help me ?

H001 SHADOW - Horizontal trim for 5/16” panels

[tristup]

Hi @zipe3,

Thanks for reaching out.
I checked the given URL and found that the Upsells element is showing in a single column on smaller screen devices. If that is not the case and you are trying to point out something else, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

[zipe3]

everything works fine but I would like the items to appear in 2 or 4 columns on my iPhone too. not in one. Is it possible to modify everything so that it shrinks the products while remaining on 4 columns on cell phone?

[prakash_s]

Hello @zipe3,

I would suggest you please go to the upsells element —>customize —>element CSS

@media(max-width: 978.98px){
$el.x-wc-products .up-sells.upsells.products li {
clear: none;
width: 47% !important;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps
Thanks

[zipe3]

Thanks for your help!

[tristup]

Hi @zipe3,

Glad that we are able to help you.

Thanks