Responsiveness of 'shop' widget in muffin builder

DanielNolan

Hello,

I am using the 'shop' widget in my muffin builder to display 3 products in a row, so three columns. When this is viewed on mobile it displays all 3 items on above the other in one column which is fantastic and looks lovely. However when viewed on a tablet the shop widget displays my 3 products in two columns which looks rubbish because I only have 3 items so there is a blank space where a fourth product should be.

Can I set the 'shop' section up so it displays in one column (like on mobile phones) when viewed on a tablet?

Pablo

Hi,

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us the link.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Hi Pablo,

My apologies, you can see the website here at tradeadvertiser.com, the home page is made of 5 different shop widgets with three products in each widget. With text in between each text widget. When viewed on tablets, the products within the shop widgets are put into 2 columns, as I only have 3 products and not 2,4,6 or 8, this means that there is a gap after the third product. So I would rather have this as one column like it is on mobile phones.

Pablo

Please use this CSS code in Theme Options -> Custom CSS & JS -> CSS

@media (max-width:1024px){
   .products_wrapper li{
      width: 100% !important;
   }
}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

amazing, thank you!

DanielNolan

could you also please send me the code for 3 columns just so I can decide which one looks better?

thanks so much

Pablo

Change the "width" value to smaller, between 30% and 33%, it will do the job.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

Hello, I tried that but if you take a look at my homepage tradeadvertiser.com you will see that when you resize the browser more to mobile size the layout breaks and it reverts to 2 columns with a huge space on the right hand side of the screen. It works perfectly well when set to 100% but something breaks when I change to 31%

Pablo

Okay, I see it now.

Please use this CSS code instead:

   @media (max-width:1024px){
      .products_wrapper li{
         width: 30% !important;
      }

         .products_wrapper li.product:nth-child(2n+1){
            clear: unset !important;
         }
   }

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

No it still isnt working. I now have two columns even when viewing on mobile size

DanielNolan

Pablo

You have a lot of CSS code in one of the files, and one of them is issued (not closed)

After closing it, the CSS code I sent you works correctly.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

DanielNolan

That is ridiculous, and entirely my fault. sorry for wasting your time I dont know what I was thinking

Phil

Hello,

Do not worry. We are here to help you out, and we are glad that it is working properly now.

If we can help you with anything else, please, let us know.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next