0

I'm not 100% sure how to ask this question so I'll just try my best.

I'm developing a site that has a top bannar with a logo to the far left.

enter image description here

When I go to the site on a netbook (small screen) or zoom in with my browser (CTRL and then use mouse wheel) the logo evently sits over other items on the bannar.

enter image description here

Is there a way for me to detect the logo won't fit with JQUERY and then hide it? Can I tell how much of the page the user is seeing and then make this adjustment? thx

Adam
  • 17,063
  • 33
  • 111
  • 184
  • well try `display:block;` in top bar css – Basic Bridge Jul 06 '12 at 08:13
  • take a look at this http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript – Teneff Jul 06 '12 at 08:15
  • This seems more of a design flaw. Seems like you have the logo floated to the left and the rest of your top bar to the right. Make a wrapper for both and give the wrapper a `min-width` at which these 2 elements don't overlap. IMO it's a much better and cleaner solution. – Fabrício Matté Jul 06 '12 at 08:22

1 Answers1

0

The main reason of this issue is that Your Html controls are not properly tightly bounded together. Either if you can use table in your Html page, then it will work for you. Put your logo in the first cell of your table. Then the design will not be distorted on zooming it up.

Arun Jain
  • 5,356
  • 2
  • 27
  • 51