Responsive Issue with Product Grid - Hotcakes Commerce

Go to previous topic

Go to next topic

Last Post 7/28/2022 7:15 AM by Alfredobuka

Responsive Issue with Product Grid

6 Replies

1 Subscribed to this topic

1 Subscribed to this forum

Author

Messages

New Member

Posts:3

12/29/2021 3:21 PM
Hello Group! I just installed Hotcakes, added some products and the product grid doesn't appear to render correctly on mobile. I'm using the built-in Xcillion skin. I'm unable to upload an image to demonstrate the issue but it looks like it's using col-xs-3 when it should be using col-xs-6. When I remove the inline styles below using Firefox's Developer Tools, it appears correctly. <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 0%; top: 0px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 33.3334%; top: 0px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 66.6667%; top: 0px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 0%; top: 460.567px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 33.3334%; top: 460.567px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 66.6667%; top: 460.567px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 0%; top: 921.134px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 33.3334%; top: 921.134px;">...<div> <div class="col-xs-6 col-md-4 hc-product-card" style="position: absolute; left: 66.6667%; top: 921.134px;">...<div> Where do I go to fix this issue? Thanks, Andy

Veteran Member

Posts:570

12/29/2021 3:59 PM
Hmmm... Perhaps you can add your images/videos using another outside service? For example, we mostly use [url=https://www.techsmith.com/store/snagit]SnagIt[/url] or [url=https://www.techsmith.com/jing-tool.html]Techsmith Capture[/url]. Will Strohl, Upendo Ventures Hotcakes Cloud \| Get Support \| Code Support Official Cloud & Support provider for Hotcakes

New Member

Posts:3

12/29/2021 4:26 PM
Thanks Will, I uploaded the screenshot to a S3 Bucket. You can view it here... https://images.kleen-ritecorp.com/images/Screenshot_20211229-152106_Chrome.jpg Thanks for taking the time to look into this. Andy

Veteran Member

Posts:570

12/29/2021 6:41 PM
Thanks for the screenshot. Can you please help everyone by providing the clear steps to reproduce the issue? What is the version of Hotcakes Commerce and DNN as well? Will Strohl, Upendo Ventures Hotcakes Cloud \| Get Support \| Code Support Official Cloud & Support provider for Hotcakes

New Member

Posts:3

12/30/2021 11:07 AM
Will, I am using the following... DNN v9.10.02 Hotcakes v3.6.0 I installed Hotcakes v3.6.0 on a clean install of DNN v9.10.02, created 9 products each with 5 choices (S, M, L, XL, XXL). You can view the site here... http://nop.focaltechinc.com Thanks, Andy

Veteran Member

Posts:570

1/3/2022 9:42 PM
This doesn't appear to be an issue with the viewset as far as I can tell. Instead, the module was placed in a pane in the theme that will never expand to fill the viewport. If a different theme or pane is used, either choice should clear up this problem. Will Strohl, Upendo Ventures Hotcakes Cloud \| Get Support \| Code Support Official Cloud & Support provider for Hotcakes

New Member

Posts:1

7/28/2022 7:15 AM
By listing everything this way, you’ll know exactly what kind of employees you need and the tasks you intend to give them. That makes the next step—market research—much easier https://mlsdev.com First, consider the location of your development team. There are three choices here: onshore, offshore, and nearshore. Here is what each of them entails: