[Resolved] Ethos Theme Form in Mobile Version

[Jeremy]

Hi Support Team!
Can you tell me how to change the location of the Happy Forms (Speak to an attorney today) contact form in mobile version? By default, the form is displayed below the main content of the page. I would like to make it appear before the content.
Thank you so much!

[Elvin]

Hi,

To clarify: You only want to change the location on mobile?

You can do this:

Add mobile-reverse CSS class to the Grid Block that contains the HappyForms’ form. You can do this by selecting the Grid Block and on its Block settings tab, click Advanced and add mobile-reverse to the CSS Class textfield.

You then add this CSS:

@media (max-width:768px){
.mobile-reverse {
    flex-direction: column-reverse;
}
}

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

What happens here is, we simply reverse the appearance order of the Grid Block columns so the HappyForms column appears first on mobile.

[Jeremy]

Hi Elvin, yes that’s exactly what I want.

I did the test on a page and I can see the new class and the css added in the code but the form remains in the same position (after content) in the mobile version.

Thanks!

[David]

Hi there,

select the Grid Column containing the Form, go to the settings Layout, select the mobile tab, there you will see the Order field, enter -1 to position it above the other content.

[Jeremy]

Hi David,
Thank you so much it’s perfect!

[David]

Glad to be of help.

[Author]

Posts