Woocommerce Mobile Layout

Posted in: Newsmag
Post count: 30

Hi,
I can’t work out how to get the .summary .entry-summary column to go below the featured product image on the product page on small screens only?
It continues to be 2 narrow columns as it is on large screens.
I am sure it used be responsive before updates?
Any ideas how to make this happen?

Also, my Up-Sells always show in 2 columns instead of 3 as the related products do?
Any ideas how to fix this?

DJTees T-shirts that Rock!

Cheers
Dawn

Post count: 6535

Hi

As a css rule to be aplied only for mobile devices you need to use media queries like here: http://screencast.com/t/jCUEnWX9XAE

@media(max-width: 768px){
.woocommerce-page div.product div.images, .woocommerce-page div.product div.summary{
float: none!important;
width: 80%!important;
margin-left: auto;
margin-right: auto;
}
}

The Up-Sells products are controled by woocomerce and they have a width wich don’t allow three product on the same row but you can use this css to achieve that: http://screencast.com/t/8u5duk5wa

.woocommerce-page ul .product{
width: 29.25% !important;
}

Thanks!

Viewing 2 posts - 1 through 2 (of 2 total)
The forum ‘Newsmag’ is closed to new topics and replies.