Content area Modal button centered on mobile

[Timmid]

Hello X theme,

I’m working on a website were I have made a “contact” button with Content area Modal that opens a contact form.

Now I want the button to be centered on mobile devices but I can’t make it work. Can you help me out?

The website url is:

Home - Burosupport

[albrecht]

Hi @Timmid,

Thanks for writing in. It looks like it’s not getting centered because of the loading image that will appear when the button is clicked. Try adding this custom css so that the loading image will go below the button.

.x-modal-content .ajax-loader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}

Hope it helps.

[Timmid]

Thx for the help. Not sure were to place this?

I placed this on the global page css but that didn’t work.

[lely]

Hi @Timmid,

Are you referring to this one:

CSS can be added on Customize Tab > Element CSS. Look at this content area modal element documentation for screenshot of element settings.

We can try using media query to target the button on smaller devices. Add the following CSS on Customize Tab > Element CSS

@media(max-width:480px){
$el.x-anchor {
    margin: 0 auto 25px;
}
}

Look at this: https://screencast-o-matic.com/watch/cYefXyx1Uo

Hope this helps.

[Timmid]

Hello Lely,

This worked, thank you!

[nabeel]

Glad we could help.

Cheers!