Ask your WordPress questions! Pay money and get answers fast! (more info)

Woocommerce media queries

  • SOLVED

Hi

I want my shop page to display

3 products per row on desktop

2 products per row on portrait tablets

1 product per row on mobile

Answers (3)

2016-09-19

Rempty answers:

Hello
Are you using a template?
Do you have a link?


suddy12007 comments:

Hi, yes its

http://79.170.40.234/newgcp.uk/


Rempty comments:

add this to your style.css

@media only screen and (min-width:768px) and (max-width:991px){
.site-main ul.products li.product {
float:left;
width: 45%;
}
.site-main ul.products li.product:nth-child(odd) {
clear:both;
margin-right:10%
}
.site-main ul.products li.product:nth-child(even) {
margin-right:0
}
}
@media only screen and (max-width:767px) {
.site-main ul.products li.product {
float:none;
width: 100%;
}
.site-main ul.products li.product:nth-child(odd) {
clear:both;
margin-right:0
}
.site-main ul.products li.product:nth-child(even) {
margin-right:0
}
}
@media only screen and (min-width:992px) and (max-width:1103px){
.site-main ul.products li.product {
width: 29.4117647059%;
}
}


suddy12007 comments:

Thanks for your help,

I've applied this update.

On tablets (Portrait)

It seems to display 2 products on the first row and only one product every row thereafter.

Any ideas?

Could it be down to the themes default for products per row? (https://docs.woocommerce.com/document/change-number-of-products-per-row/)

If so how do I disable this function?


Rempty comments:

Code Updated

@media only screen and (min-width:768px) and (max-width:991px){
.site-main ul.products li.product {
float:left;
width: 45%;
clear:none!important;
}

.site-main ul.products li.product:nth-child(2n+1) {
clear:both;
margin-right:10%!important;
}

.site-main ul.products li.product:nth-child(even) {
margin-right:0
}
}

@media only screen and (max-width:767px) {

.site-main ul.products li.product {
float:none;
width: 100%;
}

.site-main ul.products li.product:nth-child(odd) {
clear:both;
margin-right:0
}

.site-main ul.products li.product:nth-child(even) {
margin-right:0
}
}

@media only screen and (min-width:992px) and (max-width:1103px){
.site-main ul.products li.product {
width: 29.4117647059%;
}
}


The function of default items per row only works for desktop views, mobile and tablet are done with responsive style.


suddy12007 comments:

Fantastic! YOUR AWESOME!

I dont duppose you can let me know how I can make the "check it out" button and price stay the width of the image above like it does when it displays 3 products per row.


Rempty comments:

add this css

ul.products li.product img {
width: 100%!important;
}


Rempty comments:

If this work, please don't forget click "Vote to award prize" to give me the prize
Thank you.

2016-09-19

Jayaram Y answers:

For Tablet in two columns


@media only screen and (max-width: 768px){

.site-main ul.products li.product:nth-child(odd) {
clear: none;
margin-right: 10% !important;
}
ul.products li.product.first {
clear: none;
}

}


For Mobile in one Column


@media only screen and (max-width: 480px){

.site-main ul.products li.product {
width: 100%;
}

}

2016-09-19

dostoyevski64 answers:

Add this at the end of the style.css file in your storefront child theme:



@media only screen and (max-width: 425px) {
.site-main ul.products li.product {
width: 100%;
}
}

@media only screen and (min-width: 426px and max-width: 768px) {
.site-main ul.products li.product {
width: 50%;
}
}

@media only screen and (min-width: 767px) {
.site-main ul.products li.product {
width: 33.333%;
}
}

ul.products {
margin-left: -15px;
margin-right: -15px;
}
ul.products:after {
content: "";
display: table;
clear: both;
}
.product {
position: relative !important;
float: left;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 15px !important;
padding-right: 15px !important;
}



That'll make your columns display properly on any device, you should also add this code snippet at the end of your functions.php file



add_action('wp_footer', 'storefront_fluid_responsive');

function storefront_fluid_responsive() {

echo '<script type="text/javascript">

var winWidth = jQuery(window).width();

if (winWidth > 969) {
jQuery('ul.products li.product:nth-child(3n+0))').after('<div class="clearfix"></div>');
}
if (winWidth > 767 && winWidth < 969) {
jQuery('ul.products li.product:nth-child(2n+0)').after('<div class="clearfix"></div>');
}
// Reset on resize
jQuery(window).resize(function(){
winWidth = jQuery(window).width();
jQuery('.products .clearfix').remove();
if (winWidth > 969) {
jQuery('ul.products li.product:nth-child(3n+0))').after('<div class="clearfix"></div>');
}
if (winWidth > 767 && winWidth < 969) {
jQuery('ul.products li.product:nth-child(2n+0)').after('<div class="clearfix"></div>');
}
});

</script>';

}



That last snippet will add another layer of responsiveness to your site, your site will now be able to adapt to devices both in normal and landscape mode.


suddy12007 comments:

Hi,

Just applied these but they seemed to have broke the website.