Displaying Related Products on Mobile - 7.0

Site URL: https://www.lynnemeade.com/

I'm having an issue with display of related products in an online shop to be launched soon. The SQSP version is 7.0 and the template is Avenue.

The three related products display next to each other horizontally similar to the computer desktop view, rather than stacking vertically in a single column. My understanding is that images stack vertically on mobile in the Avenue template, except in some blocks like summary carousels which stack in two columns. (I'll address an issue with that display in a separate question.) The resulting display of product images and text is too small for a user to see and read well, particularly on mobile phones.

On mobile phones, I'd like each related product to stack vertically with the product title and price centered below the product thumbnail. The product title and price may require left justified styling for longer titles. I'll have to test the best overall text styling once the related products display vertically stacked. For now, I've set the "Details Alignment: Center" in site styles.

The tablet display is problematic as well, even more so in portrait mode. I'd prefer to keep the three related products in one row horizontally rather than creating two columns. I noticed that the related product images and text don't span the full length of the screen inset. Perhaps changing that would help on tablets in both portrait and landscape mode.

To see the display issues, I've attached two screenshoots of the current horizontal mobile phone display and one of the tablet display. The web site is Lynne Meade Ceramics.

Code from two related-products questions Displaying 2 columns / Related Products / Mobile and Limit the number of related products didn't correct the display issue. My being new to custom CSS is hampering the effort. I'd appreciate any pointers on how to resolve this display problem. 

Kindly,

K

Can you share link to a product? We can check easier.

@tuanphan thank you for quick reply. Here's the private product landing page. You can click through from there to product item pages.

https://www.lynnemeade.com/tabletop

pw: displayissue

@tuanphan Any thoughts on how to make related products stack vertically in single column on mobile? Site created with Avenue 7.0.

Would love this answer too!

@smdreyer I haven't figured out yet. We launched the store with the three related products side-by-side mobile.

Perhaps @tuanphan or another Circle Leader or Expert can help to make then stack in single column.

Hi @tuanphan I came across this thread and thought you might be able to help us with a similar issue. At the website below: https://llama-cricket-rhgy.squarespace.com/shop/p/tiled-leather-pillow password: Doves2021!

The number of related products defaults to 5 making the last one go to the bottom row. Is there a way to adjust this so that all five fit on one row or only display 4? Let us know. Thank you! 

On 9/28/2021 at 3:22 AM, dovely said:

Hi @tuanphan I came across this thread and thought you might be able to help us with a similar issue. At the website below: https://llama-cricket-rhgy.squarespace.com/shop/p/tiled-leather-pillow password: Doves2021!

The number of related products defaults to 5 making the last one go to the bottom row. Is there a way to adjust this so that all five fit on one row or only display 4? Let us know. Thank you! 

Add to Design > Custom CSS

/* Hide item 5 from Related Products */
div.ProductItem-relatedProducts .list-grid>div:nth-child(n+5) {
    display: none;
}

Thank you so much @tuanphan! It worked great.