Different layout problems IE11

Support
#1

Hi, I have several problems watching my page on IE.
I announced these problems already at begin of october but till now they aren’t solved. Next week we’ll start the business and the page must be online.
Could you plese enter to my page and adjust the things in the way that it is ok also on IE11? It’s very important that the problems are solved at begin of next week, please understand:
I opened the first ticket about this issue 2 months ago…:frowning: and I renewed my support license because it wasn’t solved …
the webpage is: www.zolliway.com
Username and pssw follows

a picture here but there are more problems. Mainly on the page “home” and the page “contatto”. please dobule check the page comparing the page on edge or chrome and the page on IE.

Thank you very much in advance!

#2

Hi there,

It does look like that in IE since the background color opacity is set to 0. Please try using a solid background color on your flip card, like a white background.

This is what I see background-color: hsla(283, 39%, 53%, 0);, and opacity is 0.

Thanks!

#3

Thank you.

first problem solved!

more down I have still a problem with the cards :(…
The icons from the cards are moved down.

#4

Hi there,

That’s due to max width of your site, it’s blank in Admin > X > Launch > Theme Options > Layout & Design, I set SITE MAX WIDTH (PX) about 1500.
Then I added this CSS

@media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, .x-container.max  { max-width: 100% !important; } /* IE11 */
}

It should be okay now.

Thanks!

#5

Hi Rad!

Thank you very much! but unfortunately it isn’t solved…

#6

Hi there,

Please clear your browser cache, when it comes to IE, please repeat doing it since it may not really clear its cache based on my personal experience.

Thanks!

#7

Hi!

I deleted my cache but on Internet Explorer I see it all times like that…

#8

Hi there,

Could you try visiting your site with ?nocache=1&time=1 to your URL, and increase time everytime you reload it. Example, http://example.com/?nocache=1&time=1, http://example.com/?nocache=1&time=2.

Just to make sure you’re not viewing the cache version. And please provide a screenshot of your IE11 build version. Is it an upgraded version of IE10? Because it may be functioning like IE10 even though it’s IE11.

Thanks!

#9

I get till time 10, nothing changed.

#10

Hi There,

That is a bug in IE where it does not support the max-width: 100%; we apply on images. With that property, images should respond to its parent div’s width. To fix this issue please add the following custom CSS to Theme Options > CSS

/*image and card fix on IE*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
   .x-face-graphic img,
   .x-image img {
   	width: 100% !important;
   }
}

Hope it helps,
Cheers!

#11

Great! this was the right solution:)! thank you so much!

The next issue (and maybe the last one…) ist that the Arrow below the video, should be visible but the logo below not. I mean, the Arrow should be at the below margin of the screen. At yet, watching the page from my laptop, the Arrow and a part of the logo are visible as in the following image, if I visit the page from my home computer, I see only half of the Arrow. Can we arrange it in the way, that Always only the Arrow is visible?

#12

Hi There,

Revolution Slider has this Full-Screen option.

Unfortunately, Layer Slider does not have this option please add this to Theme Option > CSS instead.

.x-slider-container.above {
	height: 100vh;
}

Hope it helps,
Cheers!

#13

great! thank you! you’re Amazing!

#14

On behalf of my colleague, you’re welcome. Cheers!

#15

Hi Paul!

insering the CSS above, on the mobile phone the site tries to show the video but it doesn’t work. on layer slider the video is unable on mobile phones…

#16

Hi there,

Videos are not working on mobile phones, it needs user consent to be played on mobile. And there is no way a user could interact with background video. Instead, you should use Revslider with background video support and enable poster image. So it will display an image when the video is not available.

Plus, now your flip cards are not working anymore in my IE. Perhaps, your IE11 has different KB update (build) than mine which is why we’re seeing it differently. So please change your CSS to make sure it works on multiple sub-versions of IE11.

@media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, .x-container.max  { max-width: 100% !important; } /* IE11 */
   .x-face-graphic img,
   .x-image img {
   	width: 100% !important;
   }
}

Thanks!

#17

Thank you. I used the new CSS code.

But, about the layer slider on the mobile phone, it is alread setted up on “enable poster image”. This is why I told you about this problem. befor that I insered the CSS code, there was the poster image on the mobile phone.
I checked the settings in Layer Slider and it is still flagged “show poster image on mobile phones”

#18

Hi There,

Please update the custom CSS code I’ve provided above to this:

@media (min-width: 980px) {
	.x-slider-container.above {
		height: 100vh;
	}
}

Then on that Slider setting (on your screenshot above), please add a 979px on the Hide Under field.

What this combination does, is make your slider a fullscreen on a desktop view, but hide the slider on the screen below 979px.

Hope it helps,
Cheers!

#19

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