[Resolved] woo product mobile style css

[chete]

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

[David]

Hi there,

thats the correct size for mobile styling:

@media (max-width: 768px) {
    /* CSS in here for mobile only */
}

[chete]

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

[David]

Add this to the summary rule:

box-sizing: border-box;

[chete]

Hi David

Thank you very much, it works perfectly.

Regards !

[David]

You’re welcome, glad to be of help

[Author]

Posts