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

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-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.

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...

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…

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.