Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Displaying Related Products on Mobile - 7.0


kherzog

Question

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

You-Might-Also-Like-3-column-mobile-display-1.png

You-Might-Also-Like-3-column-mobile-display-2.png

You-Might-Also-Like-3-column-mobile-table-display.png

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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! 

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...