Claudia M Posted July 18, 2018 Share Posted July 18, 2018 Is there a way to show a different amount of latestest products for the small screen and for large. I currently show 9 but I want to show 2 side by side on the small screen but that would leave 1 by itself. Thanks in advance! Link to comment Share on other sites More sharing options...
bsmither Posted July 18, 2018 Share Posted July 18, 2018 Interesting. This would be a mashup of Smarty (where the page is rendered on the server), with Foundation (where the page is styled in the browser). Smarty loops through the array of products creating the list, and Foundation draws the grid from the list. I assume you are already using small-block-grid-2, so that leaves having Smarty restrict the count of the list to a total divisible by two. But how would Smarty know what the size is of the viewport that is going to be showing the page? It can't. So, we must try to convince Foundation to hide the last row if the last row is not complete. (This is what you are wanting, correct?) That is going to be an interesting exercise. Link to comment Share on other sites More sharing options...
Claudia M Posted July 18, 2018 Author Share Posted July 18, 2018 Yes that would work fine Link to comment Share on other sites More sharing options...
bsmither Posted July 20, 2018 Share Posted July 20, 2018 Well, this turned out to be very interesting. In Foundation, your list of Latest Products panels are probably gridded according to: <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3" data-equalizer> That is, you have changed the number of panels shown on the small viewport from one to two. Without getting into the dirty details, make the follow edit: From: {if $LATEST_PRODUCTS} <div id="content_latest_products"> To: {if $LATEST_PRODUCTS} <style> /* Kill single element on the last row for small-2 and large-3 viewports */ #content_latest_products .small-block-grid-2 > li:nth-child(1):nth-last-child(1), #content_latest_products .small-block-grid-2 > li:nth-child(1):nth-last-child(2n+1) ~ li:last-child, #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(1), #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+1) ~ li:last-child { display: none; } /* Kill 2 elements on the last row for large-3 viewports */ #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(2), #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(2) ~ li, #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+2) ~ li:last-child, #content_latest_products .large-block-grid-3 > li:nth-child(1):nth-last-child(3n+2) ~ li:nth-last-child(2) { display: none; } </style> <div id="content_latest_products"> You have made changes to the skin template, so you may need to have CubeCart clear its cache. Link to comment Share on other sites More sharing options...
Claudia M Posted July 20, 2018 Author Share Posted July 20, 2018 Wow Brian!!! Thank you for this! I'll implement it and let you know how it does. The small view looks great - no extra product. But on my laptop the last product is also gone. It is only showing 8 products instead of 9.. I cleared the cache Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.