Responsive alignment

Hi @martavanaga! Thanks for letting us know. Upon further inspection, we noticed that you have several styled box types on your page. While most of them are displayed normally, the number boxes stand out for being aligned to the left instead of being centered. For that case, you can use the following code snippet in your custom CSS to ensure that all number boxes on your page are centered:

@media screen and (max-width: 800px){
    .ub-number-box {
       display: flex;
    }
}

Please let us know how it goes and whether or not the other styled box formats on the page are not working as expected.

Wow, just perfect, it worked!

Thank you looks sooo much better!

Hello sorry, seems like on mobile now is another issue with number boxes..

You can see in the photo that the text is split… is there any css or trick to make this responsive?

Hi @martavanaga ! You’re using long words within the number boxes. In your case, the best option would be displaying the columns vertically instead of horizontally. This is how the default style we have for this situation handles this, but the code snippet we gave overrode this.

You can replace the snippet we gave you earlier with this, which should accomplish both centering the number boxes and giving enough space for the content within them:

@media screen and (max-width: 800px){
	.ub-number-box .ub-number-panel{
		width: 100%;
	}
}

Please let us know how it goes this time.

Worked! And thank you very much again. ??