Center Elements on Mobile Only

[StickAndGrow]

Hello!

I’m working on a bio page where the elements are aligned left for most devices. However, that looks awkward on mobile. Is there a way to center individual elements on mobile?

Best Dance Teachers in the Poconos

Here, I would like the headshot and teacher’s name to be centered on mobile devices?

Thank you!

[Prasant]

Hello @StickAndGrow,

Thanks for asking.

Please do the following to center align image on mobile devices:

1. In your image and headline element under Customize > Class add a class name ex center-element-mobile. Here is a screencast that you can refer. https://cl.ly/2i2q0Q43402e
2. After adding the class name, please add following CSS under X > Theme Options > CSS:

@media only screen and (max-width: 600px) {
    .center-element-mobile {
    display: table;
    margin: 0 auto;
}
}

Let us know how it goes.

Thanks.

[StickAndGrow]

Hi!

That’s awesome! Thank you. It worked for the image but not for the headline? What do you think could have gone wrong?

Thanks!

[lely]

Hi There,

Update to this:

@media only screen and (max-width: 600px) {
    .center-element-mobile {
    display: table;
    margin: 0 auto !important;
}
}

The headline element margin settings is added as inline CSS which has higher priority compare to page CSS. Important will make sure it will override that.

Hope this helps.