Woocommerce media queries WordPress
- 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)
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.
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%;
}
}
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.