Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Header Logo spacing on Safari Browser

Posted on 2011-03-15
1
Medium Priority
?
430 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 43

Accepted Solution

by:
David S. earned 2000 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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
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).
Suggested Courses

886 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