Display Issue in Firefox

Thanks Victoria. That works for screen widths larger than 663px. However, at widths of 663px or less, the grey box separates from the grey border. Is there a way to fix that?

The problem is the overflow: auto line. That seems to cause the sponsored by box to disappear in firefox. But I need to use that because the height of the div id is too high and the top of the grey box extends far above the actual sponsored by line. Is there any way of making the div id height less? I tried using span instead and while that did reduce the height of the box, it also limited the width to only the size of the text.

Hi Victoria,

Unfortunately that still did not work correctly as the smaller sized screen widths still displayed a gap between the box and border.

I did some trial and error and came up with this:

.avia-mozilla #sponsor-class {
    display: block;
    width: -moz-available;
}

That seems to work good although I have never used the code -moz-available. Is that okay to use?

As well, from what I understand the -moz-available code is only for Firefox so do I still need to keep it under the .avia-mozilla class selector or can I put it with the rest of the CSS in the ID selector #sponsor-class section? For instance:

#sponsor-class {
    text-align: center;
    font-weight: 300;
    background-color: #7a7874;
    margin: 0px -18px -10px -18px;
border-radius: 0 0 10px 10px;
overflow: auto;
width: -moz-available;
}

• This reply was modified 4 years, 4 months ago by lsrmedia.

When I use width 100% the box does not extend the full length on the right side in Firefox.

However I just discovered that in some older version of Microsoft edge, the box doesn’t display at all because of the “overflow: auto” code.

So maybe there is another way of doing this. I erased all my extra code and took it back to when I had my original problem.

Please check my website again and look at the first 4 posts. You will notice that the grey “sponsored by” box fits perfectly at the bottom and side to side in all browsers. However the box extends too high and goes into the social share box in all browsers. I really don’t understand why the box is extending so high. What I am trying to do is bring the box down so it is below the social share icons.

What is the best way to accomplish this? I tried using both the “overflow: auto” and the “display: flow-root” code and while either one will fix the issue in Chrome, it causes the entire box and sponsored by text to disappear in both Firefox and older versions of Microsoft Edge.