Vertical Centering Not Working on Mobile Views

Support
#1

Having a bit of an issue. I am creating a section with a background, set to 50vh, and adding a quote in the column which I have set to center vertically. It displays as it should in the desktop views, but the two mobile views the text reverts back to the top of the column.

For the Row, I have height: 50vh and marginless columns set to “on”
For the Column, I have $el {vertical-align: middle !important;}

Not sure why it is behaving like this for a different view, but if you could help me out I’d appreciate it!

Jon

#2

Hello Jonathan,

Thanks for writing in!

Can you please confirm the URL as I am getting 404 page not found error message?

Thanks.

#3

The site is right, take a look at the secure note for the info. You will most likely have to modify your hosts file with the IP I provided above. The site is not live as of yet.

#4

Hi Jonathan,

In mobile devices when marginless columns is enabled, the layout changes from table to block and vertical-align: middle; doesn’t work with display: block; so to make sure the display remains the same in the mobile device as well, give your section a class vertical-center and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
	.vertical-center .x-container.marginless-columns {
    	display: table !important;
	}
	.vertical-center .x-container.marginless-columns>.x-column {
    	display: table-cell !important;
	}
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#5

Thanks! Will this have any negative effects on my other layouts or other areas of my site?

Appreciate the support!

Jon

#6

Hi Jon,

It shouldn’t affect the other layout since it’s class specific styling.

Thanks!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.