Help needed tweaking list view for small screens

Tourist
10 1 1

Hello,

 

Just posted this query on the Design column, and was flagged for spam. Hopefully that won't happen here, as I am legitimately reaching out for help. Would greatly appreciate any help with the following problem, which I will do my best to explain clearly.

 

I am using list view to display collections in the Debut theme. I have changed the product card liquid to include the product description as part of the title column, truncating the word count at 50 to avoid excessively tall columns. This works great when viewing the site on a computer, as in the following photo:

Screen Shot 2019-08-21 at 3.40.53 PM.pngHowever, when viewing the site on a mobile device, the description stretches out vertically in an unappealing way:

20190821_154357.jpg

While truncating the word count even more would fix this problem, it limits the amount of information I can present too drastically. 

 

I am looking for a solution to this problem, and am open to a variety of approaches. If there is a way to truncate word count depending on screen size, that would be optimal. Alternately, I would be open to omitting the description altogether when viewing the site on a mobile device. Finally, if there is a way to rearrange the product card columns when viewing on a small screen (for instance, putting the picture above the title/description text, and the price below it), that would also be fine. 

 

I'm not sure where to go about making these changes, or how, and any input would be greatly appreciated! Thanks!

0 Likes
Excursionist
26 1 9

I didn't see a link to your site, but this is a simple html css issue. If I could look at the page, I could either tell you how to edit the code, or give you a quote on how long it would take to edit it. Either way, the work is minimal.

0 Likes
Tourist
10 1 1

Hi Stevo,

 

Thanks for your reply. You should be able to find my site at dividinglinebooks.com. The password is auclaw.

 

I did manage to find a partial solution to my problem, using the following script to modify the theme css and suppress the product description:

 

@media only screen and (max-width: 600px) {
  div.product-single__description {
    display: none;  
  }
}
 
Unfortunately, this solution suppresses the description not just from the list view page, but also from the individual product page. I definitely don't want that to happen.
 
Any help you can offer about solving my problem (by whatever means) would be most appreciated.
 
Thanks,
 
Evan 
0 Likes
Highlighted
Excursionist
26 1 9

Hey Evan, I logged in and took a look at your store. I think I know exactly what you want to do.

 

Email me at stevehooddesign@gmail.com 

 

I'd be happy to help you get this fixed quickly. Also that way I can email you your options and let you know what it would cost, either way I don't think it would go over an hour.

 

-Steve

0 Likes