- This topic has 10 replies, 2 voices, and was last updated 5 years ago by
.
-
Posts
-
Hi,
In mobile view the WooCommerce info/message/error banner wraps the text to the left and around the continue shopping button. .woocommerce-info, .woocommerce-message, .woocommerce-error
How can I have the message text appear on top centered and the button underneath centered so it actually looks like an adult did it instead of a 7 year old. A bit a padding between the message and button would make it look even more appropriate.
Please advise
Customer Support
Hi there,
try this CSS:
@media(max-width: 600px) { .woocommerce-info, .woocommerce-message { display: flex; flex-direction: column-reverse; text-align: center; } .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button { display: block; margin-top: 10px; } }Hi,
Not 768px?
Do I have to add .woocommerce-error?
Like this:
@media(max-width: 768px) { .woocommerce-info,.woocommerce-message, .woocommerce-error { display: flex; flex-direction: column-reverse; text-align: center; } .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-error .button { display: block; margin-top: 10px; } }Hi,
The button is taking the whole width of the screen.
I lost my 10 px right and left.
Please advise
Hi,
@media(max-width: 768px) { .woocommerce-info, .woocommerce-message, .woocommerce-error { display: flex; flex-direction: column-reverse; text-align: center; } .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-message .button, .woocommerce-error .button { display: block; margin-top: 10px; margin-right: auto; margin-left: auto; } }It’s a good? 🙂
Looks good to me.
Couple of points:1.
woocommerce-erroris not required in this instance – but you may have a similar issue with the error notices.2. The
600pxvs768px– you can set the value to wherever you want the content to be stacked. Simply resize the browser to see where its necessary for the content to stack.Hi,
Other points.
Since
flex-direction: column-reverse;is used some messages are displayed in reversed order. I removed the selector.woocommerce-infoeverywhere.Most likely as you mentioned
.woocommerce-infois not needed also as there are no buttons within those messages I think. I need to generate some errors. Don’t know how to…Oups typo
Most likely as you mentioned
.woocommerce-erroris not needed also as there are no buttons within those messages I think. I need to generate some errors. Don’t know how to…Yep – that makes sense. Errors – most likely will be found on Checkout if users miss out key fields.
Hi,
Worse case if there’s a button in an error message it will just look like a 7 year old coded it.
If it can help anyone else evised code:
@media(max-width: 768px) { .woocommerce-message { display: flex; flex-direction: column-reverse; text-align: center; } .woocommerce .woocommerce-message .button { display: block; margin-top: 10px; margin-right: auto; margin-left: auto; } }Thanks for your help.
🙂
Glad to be of help.
- You must be logged in to reply to this topic.
