Footer Blocks Flexgrid

[gofrank]

A page in one of my projects exhibits some strange behavior when moving to smaller breakpoints. In the Default view, and in 1024 and 768, all is well. When i get to 480 and 320, the footer jumps up to overlay part of the text.

The page uses a master page consisting of a header layout grid set to "sticky" and a layout grid set to "footer (floating)". The master page works perfectly in all the other pages of the project except for the problem page.

The problem page (see the demo) consists of a single flexgrid. In the Default and 1024 views, the height setting of the flexgrid is set to "75vh". In 768, 480, and 320, the height is set to "auto". The assigned setting is fine in everything from Default to 768, but the footer doesn't seem to recognize the "auto" setting in 480 and 320.

After trying every setting I can think of, I submit this issue for your perusal. Thanks, Pablo!

[Pablo]

I do not see anything wrong.
What exactly do I need to do to see the problem?
Can you please be more specific?

[gofrank]

Sure!

When the browser is sized to 480 or 320px wide, the footer covers the body text of the page.

The 768 view:



The 480 view:

[Pablo]

For flexgrid you cannot use a 'fixed' height (including vh variations) in the main view and 'auto' for breakpoints.
The 'auto' value is ignored. But any of the other options should.

[crispy68]

I was just going to say that the height of the overall grid is not responsive in breakpoints. It seems whatever you set the default height to is for every breakpoint also.

As a workaround, try adding the following CSS code to a html object:

Code: Select all

<style>
@media only screen and (max-width:767px){#content01-grid{height:auto;}}
</style>

[gofrank]

Thanks, Crispy...when I added your code, only the header and footer of the page rendered. But I appreciate your attempt to assist.

I went back to the page and set the height on all the flexgrid breakpoints to "auto". Still got the same footer overlap on the 480 and 320 views.

Finally, I just recreated the page from scratch, leaving the flexgrid on its default "auto" setting for all breakpoints and now everything works as it should.

[crispy68]

My code works!

It was based off your demo. Make sure you change "content01" in the code to match the ID of your flexgrid.

Also, i noticed my code above was missing an end bracket '>'. I've corrected it now.

[gofrank]

Apparently the missing end bracket did the trick. All works as desired. Thanks again, Crispy!