Responsiveness of 'shop' widget in muffin builder

DanielNolan · September 2021

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 · September 2021

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

DanielNolan · September 2021

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 · September 2021

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

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

thanks

DanielNolan · September 2021

amazing, thank you!

DanielNolan · September 2021

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

thanks so much

Pablo · September 2021

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

Thanks

DanielNolan · September 2021

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 · September 2021

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

DanielNolan · September 2021

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

DanielNolan · September 2021

Pablo · September 2021

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

DanielNolan · September 2021

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

Phil · September 2021

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

Responsiveness of 'shop' widget in muffin builder

Comments