if you just want to center them all on mobile, you can add the rule below in Advanced Options > Head Section > Custom CSS rule box.
@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2, #sidebar_header .header-widget-3 {width:100%;text-align:center;}
}
and you would want to remove the bullets on the top one by changing that to:
@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2, #sidebar_header .header-widget-3 {width:100%;text-align:center;}
#sidebar_header .header-widget-1 ul {list-style:none;}
}
But what you have right now is not great, because they only stack when the total width is above 100%, so first the 3rd one stacks which makes it a very small item on its own line, then the middel (large) one stacks which kicks the 3rd one to the right again, then they all stack, and you have the firts and thye third that are very sall items alone on their own line.
I would think that ideally, on mobile, you would want the first and 3rd on the same line, and the middle one under that.
If you want to do that, you would do the following.
Place the widgets in the Header Widget area in the following order: Choose language, Newsletter, Longlogo body-..
In the header horizontal widget area widgets give them the following width 15%, nothing, nothing
Then in Advanced Options > HEad Section > Custom CSS rule box you would put the following rules
#sidebar_header .header-widget-2 {float:right;} /*this put the news letter on the right initially*/
It may need some tweaking, and we could do that once in place