Browser specific vertical title alignment

I am using the below CSS to vertically adjust my “Site Title” placement on the home page of my clients site http://hyperformancesalescoaching.com. But on Chrome and IE the title is over the image when viewed at full screen. It looks good on Safari. How can I fix the alignment of the title for Chrome and IE without affecting the other browsers? Thanks for your help.

.slide-inner{
  top: 58% !important;
  -webkit-transform: none !important;
     -moz-transform: none !important;
      -ms-transform: none !important;
       -o-transform: none !important;
          transform: none !important;
}

Hi,

Looks the same to me in Chrome and Safari.
So I assume you want to move it down over the blue area? Try removing the top: 58% value you’ve added and add this instead:


.slide-inner { top: auto; bottom: 0; }

Vlad,
I tried what you suggested but had the same problem.

The issue is when the browser is expanded to full screen the “Site Title” moves over the persons image and does not stay in the blue area. By the way the blue area is part of the image.

Here is where it’s positioned with the code I gave you, regardless of resolution: https://snag.gy/gDyPx2.jpg
I’m not seeing the code at the moment on your site. Can you add it and keep it so I can see what’s happening?

The code is added. Please verify.

Doesn’t look like it’s added.

It looks a little better. But its right on the line.

It is added. I just checked and made sure I have it saved.

Strange. I saved the code and I see it on the Wordpress dashboard, but I don’t see the update on Chromes Developer tools. Do you see it?

Nope, don’t see it. Do you have a CDN or something that needs clearing?
Just take the whole block of code and add it in Customize > Additional CSS. I mean, it definitely solves the issue as I showed you in the screenshot, just have to get it working :slight_smile:

Vlad,
The client is still having the same browser issues. When the browser is resized the title text falls on top of his image and not in the blue area unless the page is refreshed each time.

Is there a code that would refresh the browser each time the user resizes the window?

The browsers we have problems with are: Internet Explorer, Firefox, Edge and Vivaldi.

I just checked in Firefox and it looks fine. I guess you manage to resolve it.

No it’s still the same, if you resize the browser at different sizes you will experience the issue. Just keep resizing and refreshing the browser and the text will fall on the face. I resize the browser by clicking and dragging on the edge.

Vlad,
here are screen shots from Chrome and Firefox.

Well if I really force it I see something like that when I start from a small screen and then expand to full width. It’s pretty much an edge case though.
Try this:


.header-slider {
    transition: none !important;
}

It looks much better with the last code.

Thanks for all your help Vlad.