Solved

Header Logo spacing on Safari Browser

Posted on 2011-03-15
1
395 Views
Last Modified: 2013-11-19
'm testing a logo, JustTheDriverLogo-1.jpg, in the masthead of my website and it looks fine in later versions of IE and Firefox, but when I check it on my Iphone (Safari), there is a space between the logo, in the upper left part of the masthead, and the navigation bar below it. How can I make that space disappear in Safari?

here is the website:

http://JustTheDriver.com

Thanks Experts!!
0
Comment
Question by:TonyT7220
1 Comment
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 35142422
It seems that the space is because the text on the right side of the header needs more space, so it makes the header grow in height which creates the gap under the logo.

What I would suggest doing is give a class (e.g. "phone") to the <br> between the phone numbers and then use CSS3 media queries to hide it on the iPhone.
@media screen and (max-device-width: 480px) {
  br.phone {display:none}
}

Open in new window

Screenshot is from BrowserCam:
EE-Q-26888971-iphone.jpg
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
In addition to being a great web-based presentation tool, Prezi also makes it easy to save your presentation as a PDF to share with others as well. Learn how in this tutorial. Select the share icon from the top menu in your Prezi editor: Select "D…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now