Problem with header size on Macs


#1

Hi there - We’re using the Astrid theme for our site at www.cprsedmonton.ca and we’re having a problem with the way it displays on Mac computers. The header is very large and covers a great deal of the page.

Is there any way to fix this?


#2

Hi,

I assume you’re referring to the menu being messed up?
You have a float:center propriety in your custom CSS. That propriety doesn’t exist in CSS and for some reason it messes with Safari.


#3

Yep, that is the problem I was trying to fix.

So the reason that’s in there is to keep the menu on two lines and right aligned rather than on three lines and in the middle of the header. So in other words this is how it looks now: https://1drv.ms/i/s!AtzbloEMgw_7kahPB1jJ6JbgY_DJYg

But if we take out the tag that is causing the problems this is how it looks: https://1drv.ms/i/s!AtzbloEMgw_7kahQepBQj2qWX3qkQA

Is there any way to keep that menu aligned the way we’d like it on two lines but also have it work on a Mac?


#4

Can you remove that propriety please so I can check? If I remove it in the dev tools on your site the menu shows up on two lines.


#5

Done - thanks.


#6

You have removed both the float and the padding proprieties. I think you had padding:10px before. That one you need to keep because that’s what was actually doing the trick.

Just useful to note: float:center; does not exist in CSS. Float can be left, right or none. It can’t be center.


#7

Looks like that fixed it. Thanks for the help, and for the CSS tip!