Archived topic
woo product mobile style css
5 replies · Started by Ignacio on September 22, 2018
Hi.
I installed woo. I added css to give style to the product card. But I just saw that on mobile does not look right.
What size should I add for the mobile version to use another css style ?
I added @media (max-width: 768px) { .....
but I'm not done getting it.
Regards
Hi there,
thats the correct size for mobile styling:
@media (max-width: 768px) {
/* CSS in here for mobile only */
}Hi David
ok, thank you for confirming it.
I added in custom css:
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
width: 38%;
clear: none;
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
float: left;
width: 58%;
}to give it a concrete style. But I saw that on a mobile phone it went wrong.
@media (max-width: 768px) {
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
width: 100%;
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
width: 100%;
}
}but the summary zone is not displayed correctly.
what can be what's wrong?
Regards
Add this to the summary rule:
box-sizing: border-box;
Hi David
Thank you very much, it works perfectly.
Regards !
You're welcome, glad to be of help
