2 Column for anything on a mobile device looks better than having stuff stacked. Especially when it comes to products in a woocommerce store. Some simple Global CSS can take care of this and give the mobile user a great interactive experience. 

Past the below code into your Divi / Theme Options Global CSS. Keep in mind you may need to adjust the padding and spacing depending on how your row is setup.

@media (max-width: 479px) {
.et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n), .et_gallery_item:nth-child(n) {

width: 48% !important;

@media only screen and ( max-width: 480px ) {
.woocommerce-page .woocommerce ul.products li.product:nth-child(n) {
margin-right: 5px !important;
margin-top: 5px !important;
margin-bottom: 5px !important;

@media (max-width: 479px){
.et_pb_row_fullwidth.custom-fullwidth-row {
width: 100% !important;
max-width: 100% !important;
margin: 0;
.custom-fullwidth-row .woocommerce {
padding: 0 5px 0 5px !important;

About Joe Styer

In an early 2010 ITU (International Telecommunication Union) report said that with the current growth rates, web access by people on the go — via laptops and smart mobile devices – is likely to exceed web access from desktop computers within the next five years. In 2008 two years prior to the ITU report, tech blogs from several countries wrote about my mobile site services.