[Resolved] Having text display properly in mobile for WooCommerce info/message/error banner

[Dominique]

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

[David]

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;
  }
}

[Dominique]

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;
  }
}

[Dominique]

Hi,

The button is taking the whole width of the screen.

I lost my 10 px right and left.

Please advise

[Dominique]

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? 🙂

[David]

Looks good to me.
Couple of points:

1. woocommerce-error is not required in this instance – but you may have a similar issue with the error notices.

2. The 600px vs 768px – 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.

[Dominique]

Hi,

Other points.

Since flex-direction: column-reverse; is used some messages are displayed in reversed order. I removed the selector .woocommerce-info everywhere.

Most likely as you mentioned .woocommerce-info is not needed also as there are no buttons within those messages I think. I need to generate some errors. Don’t know how to…

[Dominique]

Oups typo

Most likely as you mentioned .woocommerce-error is not needed also as there are no buttons within those messages I think. I need to generate some errors. Don’t know how to…

[David]

Yep – that makes sense. Errors – most likely will be found on Checkout if users miss out key fields.

[Dominique]

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.

[David]

🙂
Glad to be of help.

[Author]

Posts