Solved

make a header responsive

Posted on 2015-02-10
5
85 Views
Last Modified: 2015-02-10
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.header
0
Comment
Question by:mel200
  • 2
  • 2
5 Comments
 
LVL 7

Accepted Solution

by:
James Bilous earned 250 total points
Comment Utility
If the header is a static image it'll be a bit tricky. If so - you could make the image the background of a DIV and set its size to 100%.

#header_area {
    background: url('my_header_image.com');
    background-repeat:no-repeat;
    background-position: top center;
    background-size: 100%;
    max-width: 100%;
    height: auto;
}

Open in new window

1
 

Author Comment

by:mel200
Comment Utility
Ok, thanks... what width would you recommend I make it?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 250 total points
Comment Utility
If you use media queries you can just set the image width based on the width of the device. If you set width and not height the height will be calculated to maintain the aspect ration.  However for some small mobile devices you might want to consider not using an image that big with text included because it may not look good an very small screens.  You could go with an alternate that mainly features just the logo and some text.

Cd&
0
 
LVL 7

Expert Comment

by:James Bilous
Comment Utility
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

0
 

Author Closing Comment

by:mel200
Comment Utility
Thanks, all!
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

772 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

12 Experts available now in Live!

Get 1:1 Help Now