CSS not working in FireFox

Support
#1

I have a background image at the top of this page that I have set to 100% height in the "Advanced settings"see attached image.

Here is the link to a page where the top banner should be full browser height:

http://www.scottvarga.com/work/haptx

It works fine in Safari and Chrome but not in FireFox. In Firefox the background image is only as tall as the text in the cell. See attached image.

This image also uses CSS that you gave me in another support ticket that makes the background image “Fixed”
Here is the link to the support ticket:

#2

Hi,

Try to add the inline css to your section element instead of your container/row element.

Hope that helps.

#3

That worked for the full screen but text is at the top in Firefox. The CSS I was given to move the column element with the text in it down to the bottom still doesn’t work in FireFox.

This is attached to the Column element:
vertical-align: bottom;

See attached screenshot.

#4

Hi,

You can try adding a gap element on top of your text instead of using css.

Thanks

#5

I have tried adding a gap at the top and then using 75% but it doesn’t move it down. Plus I always want it anchored at the bottom so that causes issues depending on how much text I would have.

It seems like CSS should be the solution to align it to the bottom.

I have also noticed that on mobile sizes it doesn’t align to the bottom either? See attached screenshot:

#6

Hi There,

Please add height: 100vh; instead of min-height: 100vh;

It will work in firefox. Firefox having some issue with table layout height.
Hope this helps.

Thnaks

#7

That didn’t help.

The image is fine, it fills the screen based on the height of the browser window. The issue is the text box I have in the column on Firefox and in Mobile sizes stays at the top instead of aligning to the bottom.

Currently I have the following in the "Inline CSS box of the Column:

vertical-align: bottom;

And that works for Safari and Chrome but not Firefox and not in any browser when at mobile size.

#8

Hello There,

Thanks for writing in! To resolve this, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width:767px) {
  .x-section .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }
 
  .x-section .x-container.marginless-columns .x-column {
    display: table-cell !important;
    margin-right: 0;
    float: none;
    vertical-align: top;
  }
}

Hope this helps. Please let us know how it goes.

#9

That seemed to work for the mobile size screens on Safari and Chrome but it is not working in Firefox?

The text box is still at the top of the page instead of at the bottom.

But this code also causes my images not to stack when in mobile but stay as one line. I dont want that either.

#10

Hello There,

There is an on going issue with Firefox where it does not render the browser height correctly. You may check out this:


Hope this helps.

#11

I don’t have an issue with the 100vh. That works fine.

Here is a screenshot of the issue. The image on the left is fireFox, the image on the right is Safari. Safari works and pushes the text box to the bottom as I am using CSS for this.

vertical-align: bottom;

FireFox has the text at the top still.

#12

Hello There,

This issue is because Firefox does not recognize the min-height:100vh;. To resolve this, please remove min-height:100vh; and replace it with height:100vh; instead.

Please let us know how it goes.

#13

I have already changed that a while ago and it still has the same issue.

#14

Hi,

You need to set your set your section and row element height to 100vh

See Video - https://www.screencast.com/t/bOjF1a01K5Uf

Row element

Section Element

#15

Thanks! That worked for Firefox but it doesn’t work for mobile.

Above I was given CSS to fix mobile but that code uses a FIXED TABLE layout which means all of my content won’t stack on mobile so I don’t want to use that.

Is there another way to get it to work on mobile?

#16

Hi there,

It seems to be okay, but if you only intend to implement it on the desktop, then you may use a class base styling. Example, instead of adding height: 100vh; to inline CSS field, you can simply add full-height to the Class field. Then simply add this CSS to your global custom CSS, or your cornerstone’s custom CSS.

@media ( min-width: 980px ) {
.full-height {
height: 100vh;
}
}

This ensures that it will not affect your mobile styling. But I’m not sure about FIXED TABLE, would you mind providing more details about it?

Thanks!

#17

I want the text to be at the bottom on desktop and mobile. Right now the text is at the bottom on desktop but moves to the top (screenshots above) on mobile.

You guys gave me the following code above to fix that but because it uses “table-layout: fixed;” it does NOT allow the other tables on the page to stack on mobile.

@media(max-width:767px) {
.x-section .x-container.marginless-columns {
display: table;
table-layout: fixed;
}

.x-section .x-container.marginless-columns .x-column {
display: table-cell !important;
margin-right: 0;
float: none;
vertical-align: top;
}
}

#18

Hey There,

Please add a custom ID to your section. For example my-section-id and then use this code:

@media(max-width:767px){
  #my-section-id .x-container.marginless-columns {
    display: table;
    table-layout: fixed;
  }
 
  #my-section-id  .x-container.marginless-columns .x-column {
    display: table-cell !important;
    margin-right: 0;
    float: none;
    vertical-align: top;
  }
}

Please let us know how it goes.

#19

So if I name my id:

#topbanner-text

Would I use this for both ids above and would I put it on the Container, Row, or Column?

And do I include the # when I apply it to one of those?

#20

Here is what I did and nothing seemed to work?

I tried adding this to the Container, Row and Column ID fields:
topbanner-text

I put this in the GLOBAL CSS

@media(max-width:767px){
#topbanner-text .x-container.marginless-columns {
display: table;
table-layout: fixed;
}

#topbanner-text .x-container.marginless-columns .x-column {
display: table-cell !important;
margin-right: 0;
float: none;
vertical-align: top;
}
}

Not sure what I am doing wrong?