Images overlapping on certain browsers

Support
#1

Hi,

I am working on a website where I am getting some image overlap on certain browser versions. It affects the images and logo. Here is how it looks:

It is for this website: https://nutricioni.com

How can I make the images display correctly?

Thanks

#2

Hi there,

Thanks for writing in! I tested your site in different browsers and in different screen resolutions but couldn’t replicate the issue on my end (see screenshots)

Can you please let us know which browser versions you’re testing in? They might be outdated or too old. I checked your screenshot and it seems like the older version of FF you’re testing in. Consider updating your FF and check if this resolves the issue? I tested on latest FF and Chrome and I see no issue.

Thanks!

#3

As an example, it isn’t displaying properly in Internet Explorer. Version: 11.165.17134.0

The site works fine for me when I use the latest version of Chrome too, but the majority of the visitors to this site won’t have the latest browsers. They will have older technology.

And I think that the internet explorer is up to date.

#4

Hello There,

Thanks for updating in! Could you please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-image {
    position: relative;
    overflow: hidden;
}

.x-image img {
    min-width: 100%;
    width: auto;
}

We would loved to know if this has work for you. Thank you.

#5

Hi, I added in the code but it didn’t fix the issue.

I left the code in there so you can see it.

#6

Hi there,

Please try this code:

/*IE image temp fix*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .x-image img {
        width: 100%;
    }
}

Hope this helps.

#7

Thanks, that did fix it for Internet Explorer, but not for Firefox.

From browser versions of Firefox 45 (released 2016) and earlier, it isn’t displaying correctly.

#8

Hi @looktothesouth,

Please replace this CSS

.x-image img {
    min-width: 100%;
    width: auto;
}

with this

.x-image img {
    width: 100%;
}

That should fix it.

Cheers!

#9

  1. That did fix it for certain Firefox versions, but not for Apple’s Mac Computers running Firefox for the same versions (45 and below).

  2. I just checked Internet Explorer and the header is displaying incorrectly when the screen size is at full size, but it displays correctly as the screen size shrinks. It displays correctly on both Firefox and Chrome. Here is a screenshot. The top screen is Chrome and the bottom is Internet Explorer:

#10

Hi @looktothesouth,

Seems to be working on my Mac’s Firefox as well. Plus, 45 is a bit old, I recommend updating them as most of the update contains vulnerability fixes. I also installed 45 then automatically updated to the latest version, hence, it should update your copies as well. Though, that CSS should work as I tested it too.

As for IE, would you mind updating your theme first? There are IE fixes for flex layout after your current version. Maybe it’s related to that one. Though, I recommend doing the update in a staging (clone of your live site).

You may check this https://wpshout.com/quick-guides/all-in-one-wp-migration/, you can use that plugin for cloning your site. It’s the same as migration, except that you’re keeping the copy of your live site instead of moving it.

Thanks!

#11

Hi,

For IE, I updated the theme and the header still isn’t functioning correctly when it is at full size.

Thanks!

#12

Hey @looktothesouth,

Please try setting the Flex Basis of your Logo and Search Container to 100%.

If that does not help, would you mind giving us WordPress Admin in a Secure Note?

Thanks.

#13

Hey,

That did work for the Logo/Search container, but the top and bottom bar are still out of alignment. I tried using 100% setting for both of those too, but it didn’t do anything.

I will attach the login details for you.

#14

Hey @looktothesouth,

I’ve set their containers to 100% Flex Basis as well and it fixed the issue.

I’ve also fixed the search bar button. This one looks like a bug so I’ve submitted this to our issue tracker.

.x-search-btn {
  justify-content: flex-start;
}

Hope that helps.

#15

Awesome thanks for the help!

I appreciate your team’s help. I love that the theme is constantly under development and you build in advanced features. And your support is excellent!

#16

You are most welcome. :slight_smile:

#18

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