How can I fix the shifted title and align upsell products on mobile view?

Technical Q&A
1

Hi,

I added a code for having upsell products on shopping cart page, the issue is the title is shifted on PC view (mobile view ok)

Also, I’d like to have my 2 upsell products in same line and not on 2 differents line in MOBILE view ?

Thanks

Votre panier – Waterlys

Capture d’écran 0.png
Capture d’écran 0.png1960×1120 121 KB

Screenshot_9.jpg
Screenshot_9.jpg1080×2280 146 KB

2

Anyone for help ?

3

Hi Medy06! Hope you are doing well!

  1. To fix the display of the title on the desktop, just set the float: none property to this element - Screenshot by Lightshot

  2. If you don’t have more than two Upsell products, then the following code will be enough - https://prnt.sc/12bedf2 https://prnt.sc/12bee2h.

I also noticed that your container is not quite centered - https://prnt.sc/12bef8q and to fix this you will need to add a left margin equal to the right margin for this container, but keep in mind that there are different indents on the desktop and mobile phones, so you have to use media query.

I do not recommend that you add custom code yourself unless you are a developer, as you might break something.

Alex

4

Alex

thank you very much for your help

I tried to follow your instructions but I have no skills on codind, so I could not find where should add "float: none;

I mean in which section (layout, template, …) ?

thanks