Responsive alignment

  • Resolved martavanaga

    (@martavanaga)


    3 years, 4 months ago

    Hello!

    I have a problem with Responsive alignment on mobile. It seems like all the styled box content on mobile is aligned to the left, but I would like to have it the same as on PC – center.

    Is there maybe a custom css I can add for that?

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor Alexis Pandaan

    (@alexius08)

    3 years, 4 months ago

    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.

    Thread Starter martavanaga

    (@martavanaga)

    3 years, 4 months ago

    Wow, just perfect, it worked!

    Thank you looks sooo much better!

    Thread Starter martavanaga

    (@martavanaga)

    3 years, 4 months ago

    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?

    View post on imgur.com
    Plugin Contributor Alexis Pandaan

    (@alexius08)

    3 years, 4 months ago

    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.

    Thread Starter martavanaga

    (@martavanaga)

    3 years, 4 months ago

    Worked! And thank you very much again. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Responsive alignment’ is closed to new replies.