Add to Cart button exceeds product card boundary on zoom

Lora Vigil

Posted on 21/11/2022 19:39:49

The following examples are from a 13.5" laptop screen. Upon resize, the details in product card scale properly with exception of the quantity selector & add to cart.

Examples - 125%:

150%:

Replies

Nicolai Pedersen

Posted on 22/11/2022 09:59:38

This post has been marked as an answer

We will look into it.

The fix is easy though - in the below template, change grid-lg-3 to grid-xl-3 until we have an update ready.

Votes for this answer: 1

Lora Vigil

Posted on 22/11/2022 16:51:53

Thank you for the quick response, Nicolai.

Lora Vigil

Posted on 22/11/2022 17:14:16

We tried the suggested workaround, but it didn't work. We are using components on this page (product list item product repeater) - is there a different workaround for this?

Nicolai Pedersen

Posted on 23/11/2022 09:02:20

Hi Lora

In Swift_ProductListItemRepeater.cshtml template, around line 129, change the colum code to the below:

string gridColumnSize = Model.Item.GetRawValueString("GridLayoutDesktop", "3-columns");
 gridColumnSize = gridColumnSize == "2-columns" ? "g-col-xl-6" : gridColumnSize;
 gridColumnSize = gridColumnSize == "3-columns" ? "g-col-lg-6 g-col-xl-4" : gridColumnSize;
 gridColumnSize = gridColumnSize == "4-columns" ? "g-col-lg-4 g-col-xl-3" : gridColumnSize;
 gridColumnSize = gridColumnSize == "6-columns" ? "g-col-lg-3 g-col-xl-2" : gridColumnSize;
 gridColumnSize = gridColumnSize == "list" ? "" : gridColumnSize;

But you should probably choose 3 column layout on the paragraph settings instead of 4 column layout. Maybe combined with the above.

You must be logged in to post in the forum

Developer forum

Add to Cart button exceeds product card boundary on zoom

Replies