I'm about to build a shop using Woocommerce and I realized that on your own example, the shop is responsive to a point. It eventually goes to 2 columns, but how can I make it a 1 column shop for Cell phones?
Yes thats correct it only goes to two columns. IF you wish to make it one column Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width : 1px) and (max-width : 480px) {
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width:100% important
}
}
I'm about to build a shop using Woocommerce and I realized that on your own example, the shop is responsive to a point. It eventually goes to 2 columns, but how can I make it a 1 column shop for Cell phones?
http://themenectar.com/demo/salient/shop/
When I scale the demo it only goes to two columns...
Hey Brad!
Yes thats correct it only goes to two columns. IF you wish to make it one column Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width : 1px) and (max-width : 480px) { body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product { width:100% important } }
Cheers
ThemeNectar Support Team
Thanks it worked great. The only change to the code above (for others who may need this solution) is there should be a ! in front of important.
@media only screen and (min-width : 1px) and (max-width : 480px) { body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product { width:100% !important; } }