Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

make a header responsive

Posted on 2015-02-10
5
Medium Priority
?
114 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
[X]
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
  • 2
  • 2
5 Comments
 
LVL 9

Accepted Solution

by:
James Bilous earned 1000 total points
ID: 40600869
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
ID: 40601144
Ok, thanks... what width would you recommend I make it?
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 1000 total points
ID: 40601204
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 9

Expert Comment

by:James Bilous
ID: 40601229
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
ID: 40601318
Thanks, all!
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

610 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