Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Header Logo spacing on Safari Browser

Posted on 2011-03-15
1
407 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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 …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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