Hero image not displaying correctly on Edge and Firefox

Support
#1

Hi guys,

Looks fine on Safari and Chrome-- but looks like the screenshot below on Edge and Firefox (not going fullwidth). Any thoughts?

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-section.bg-image {
    width: 100%;
}

Hope it helps :slight_smile:

#3

Hi,

Yes the CSS supplied above does work to fix the Edge and Firefox issue.

But I’d like to understand what’s going on, and why the existing code didn’t work on those browsers.

I am using the following code to add a tint to the background image, which I originally found on these forums:

#x-section-1 {
position: relative;
overflow: hidden;
}

#x-section-1:before {
content: " ";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}

Can you point me to a better snippet that would be compatible with all browsers and still achieve the same result? I have a feeling it’s something to do with those first three lines.
thx

#4

Also-- how do I properly paste code here?

#5

Hi Bill,

Your custom code is fine. The issue is not related to your custom codes. The issue is because of the overflow of the logo from the navbar. That doesn’t work well on IE and FIREFOX. That is a fixed. Or this one:
.x-main.full{ clear:both; }
When fixing code, make sure to indent it. Use the preview to check if it’s added correctly. You will see it’s font color is red when it is part of the code.

#6

Lely,
Thank you for your thoughtful response, I appreciate it, and now the whole thing makes more sense.

#7

You’re most welcome :slight_smile:

#8

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