Link to home
Start Free TrialLog in
Avatar of Melody Scott
Melody ScottFlag for United States of America

asked on

make a header responsive

Hi, the boss is going to want something like the header here on our new responsive site.
magickitchen.com

The question is, how do I make a header that looks good on all screen sizes? I've uploaded the header here as well.User generated image
ASKER CERTIFIED SOLUTION
Avatar of James Bilous
James Bilous
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Melody Scott

ASKER

Ok, thanks... what width would you recommend I make it?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thats really your call and depends on the size of the browser you want to support. Making it large will keep it from pixelating when it gets too big but will take longer to load so you may want to play with it a bit.

If you want to keep from having the banner get too big you can surround the div with the header background image in another div with a max-width. For example:

#mydiv {
   max-width: 1024px
}

<div id="mydiv">
   <div id="header_area"> </div>
</div>

Open in new window

Thanks, all!