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

Displaying Related Products on Mobile - 7.0

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

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@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.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...