Skip Navigation

[Resolved] CSS issues with Safari Browser on Mac

This support ticket is created 3 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 2 replies, has 2 voices.

Last updated by Piotr_M4693 3 years, 10 months ago.

Assisted by: Christian Cox.

Author
Posts
#1918713

Hey there

I am having trouble to display Toolset components CSS properly, on the Safari Browser on Mac, on chrome look ok, apart from the padding in "Use my location" button

hidden link

#1919351
Screen Shot 2021-01-26 at 9.35.46 AM.png

Hello, Jamal asked me to look into this issue since he is unable to test in Safari on a Mac. I was able to compare the search filter layouts in Safari and Chrome, and found one main difference. I see the following custom CSS is added in your site:

.wpv-custom-search-filter__input {
    width: 100%;
    height: 150px;
    clear: both;
}

The height setting in that code results in some layout differences in Safari. I'm not sure why the height attribute was added here, but I think the differences between Safari and Chrome can be attributed to this height style. Removing the height attribute causes the filters to be displayed very similarly across browsers, as you can see in the screenshot here. I suggest you remove the height attribute from that custom CSS code, like so:

.wpv-custom-search-filter__input {
    width: 100%;
    clear: both;
}

That should resolve the major differences between Safari and Chrome filter layouts. If there is something else you would like to achieve, please explain in more detail and provide screenshots explaining the problem.

#1923569

My issue is resolved now. Thank you!