Mobile site and Woocommerce
URL to the page in question:
http://http://www.eroue.fr/e-boutique/
-
Hi !
On the mobile version of my website : http://www.eroue.fr/e-boutique/ the purchase buttons are cut. Moreover, at the checkout some informations are cut.
The problem occurs on smartphones, do you know how to fix it ?
Thanks !!!
Good Morning Thomas,
Let’s see if we can handle the wrapping on those buttons and inputs this way:
- Go to your theme options page and choose the Advanced tab.
- Scroll down to the Custom CSS box and add this:
.woocommerce #content ul.products li.product a.button,
.woocommerce-page #content ul.products li.product a.button {
font-size: 12px;
white-space: nowrap;
padding-right: 10px;
padding-left: 10px;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.woocommerce #content ul.products li.product a.button,
.woocommerce-page #content ul.products li.product a.button {
margin-left: 0;
margin-bottom: -11px;
white-space: normal;
width: 100% !important;
display: block;
text-align: center;
}
}
@media only screen and (max-width: 767px) {
.coupon input,
td.actions input {
width: 100% !important;
display: block;
float: none;
}
input#coupon_code {
margin-bottom: 8px !important;
}
}
- Update your settings.
Let me know how that goes.
Take care,
Bill
- The topic ‘Mobile site and Woocommerce’ is closed to new replies.