Archived topic
Generate inside page header content vertical center on Safari browser
7 replies · Started by Nikola on May 10, 2017
Hi Tom, i have a problem with a div element inside generate-inside-page-header-content on Safari browser for Mac.
I want to be vertical center, on the bottom of page header, how it looks like on Chrome browser. In Internet Explorer is ok, but on Safari is aligned left to the page container.
http://test.nikolakalinovic.com/
How to center it like on Chrome? Thanks.
Also on this page http://test.nikolakalinovic.com/zlatibor-apartmani/apartman-1/ if you look in Chrome wp booking calendar at the bottom of the page, it looks different in chrome, Safari and IE. I want to look like in Chrome.
Thanks in advance.
Best
Nikola
Hi there,
What version of Safari are you using? On Mac or Windows?
On Windows, I am seeing the gap. This is caused by Safari not being updated for Windows anymore, so it doesn't get any of the new cool CSS3 features like Flexbox etc..
Most likely the same issue with the calendar - it depends on how it's been coded by the developer.
Hi Tom,
The problem persist on both, Windows and Mac. The website that i am developing target premium market and i assume that will be many Mac users, i need something to resolve this, i tried some things but nothing worked. :/
Calendar has problems in IE and Safari.
Can you show me a screenshot of the issue you're seeing?
This is how header looklike in chrome, and how is planed to be.
This is how header looklike in Safari on Mac
This is how calendar looklike in Chrome, and how is planer to be.
This is how calendar looklike in Safari and IE
Try replacing your current CSS with:
.apartmani-header-slider-boxes {
position: absolute;
bottom: 0px;
text-align: center;
z-index: 999;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}I'm not really sure what's up with the calendar - you might have to ask the plugin developer about that one.
Now is fine with safari. Thank you a lot. :)
Just have to check what to do with that calendar. Can i put him somehow to the middle of column?
That will be good.
You could try this:
#sbc-calendar-wrapper {
margin-left: auto;
margin-right: auto;
}