Browser Issues, Help Please!

Site URL: https://www.reapreapparel.com/

Something, probably in my code, is causing this site to show up poorly on safari and firefox. It shows up properly on Chrome.  Any suggestions would be so helpful! Thank you!

2 hours ago, nicolettely said:

Site URL: https://www.reapreapparel.com/

Something, probably in my code, is causing this site to show up poorly on safari and firefox. It shows up properly on Chrome.  Any suggestions would be so helpful! Thank you!

It doesn’t look bad at all on mobile on my side. 

16 minutes ago, inunzi said:

It doesn’t look bad at all on mobile on my side. 

Using safari mobile? Yes I should have mentioned safari mobile is fine. Firefox, microsoft edge, and safari desktop are all missing the background and a few other elements. 😞 Thanks for reply!

10 minutes ago, nicolettely said:

Using safari mobile? Yes I should have mentioned safari mobile is fine. Firefox, microsoft edge, and safari desktop are all missing the background and a few other elements. 😞 Thanks for reply!

Oh, does it look good on google chrome? And no problem😁!

2 minutes ago, inunzi said:

Oh, does it look good on google chrome? And no problem😁!

Yes chrome is all good! 12% of my viewers on my own site use "other" browsers though. 

2 hours ago, nicolettely said:

causing this site to show up poorly on safari

Looks good on macOS using Safari browser here.

Used Microsoft Edge on Xbox One. Looked good there as well.

Can you post a screenshot or two of the bad rendering so we know what to look for?

The only other thing would be a few additions to the rules for your CSS. I flagged the new lines. You may just want to copy those few lines in by hand.

.design-layout-overlap img {
    /* new */ -webkit-transition: opacity .2s linear;
    /* new */ -o-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.Main {
    /* new */ background: -webkit-gradient(linear,left top, right top,color-stop(50%, #000),color-stop(50%, #3c3d35));
    /* new */ background: -o-linear-gradient(left,#000 50%,#3c3d35 50%);
    background: linear-gradient(90deg,#000 50%,#3c3d35 50%)
}

On 9/30/2020 at 3:43 PM, creedon said:

Looks good on macOS using Safari browser here.

Used Microsoft Edge on Xbox One. Looked good there as well.

Can you post a screenshot or two of the bad rendering so we know what to look for?

The only other thing would be a few additions to the rules for your CSS. I flagged the new lines. You may just want to copy those few lines in by hand.

.design-layout-overlap img {
    /* new */ -webkit-transition: opacity .2s linear;
    /* new */ -o-transition: opacity .2s linear;
    transition: opacity .2s linear
}

.Main {
    /* new */ background: -webkit-gradient(linear,left top, right top,color-stop(50%, #000),color-stop(50%, #3c3d35));
    /* new */ background: -o-linear-gradient(left,#000 50%,#3c3d35 50%);
    background: linear-gradient(90deg,#000 50%,#3c3d35 50%)
}

 

Oh thanks so much!!

Hi 

@creedon @inunzi

I have the same problem on my website. It all look good on safari. 

But on Chrome personnalisez footer is wrong. 
Could you please help me to understand why ? 

This is the website : https://www.maisonracontemoi.com

and the access code : MRCbst2020

Thank yo for your help !