Set maximum row height for mobile

Support
#1

Hi,
I’ve got content in a row and vertically centred using guides I found on the old forum. However, setting a maximum row height looks great on desktop view but is too long on mobile and the content goes to the top instead of in the centre.

Can anyone help with some CSS?

Here is an example.
http://77.104.134.143/~sunnyda3/fieldgateflowers.co.uk/

Thanks,
Loren

#2

Hi There,

This was posted in the wrong forum. If you are looking for support, all questions are to be posted in the Themeco category or by clicking + Support. The other categories are for discussion with fellow Apex members. I have moved your thread this time but keep that in mind in the future. A member of our team will be happy to reply just as soon as your thread is up. Thank-you!

How support works.

#3

Hi Loren,

Thank you for writing in, we can reset the height of the ROWs whenever your page is viewed on mobile. Please add the custom CSS below on X > Launch > Theme Options > CSS

/*reset the ROW's height*/
@media (max-width: 979px) {
    .x-section .x-container {
        min-height: auto !important;
    }
}

Add a CLASS mvl to your Custom Headline elements so they’ll have an equal margin above and below.

Cheers!

#4

Hi,
That’s great. Works well. But one question.

I also have a section/row where I have done the same and centred vertically, the elements there. It’s not just a custom heading but also a button. How can I keep both the elements centred vertically on mobile?
Thanks,
Loren

#5

Hey Loren,

Give that section padding using inline CSS, e.g add the following code in that section’s style field:

padding: 50px 0;

Then add the following code in your Customizer:

@media (max-width: 979px) {
    .h-custom-headline {
        margin: 0.2em 0 !important;
    }
}

Hope this helps!

#6

Hi,
No that makes the other section (with just a custom headline) that currently works, go wrong (makes the height too small).

#7

Hi again,

Can you please point us to the section you’re referring to by sharing some screenshots so we can give you the tailored solution?

Thanks

#8

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