My header image isn't responsive - html

Question

I'm making a website for my course in webdesign and one criteria is for it to be responsive (resize content to fit screen size).
So in my site as it is every image and text paragraph size according to screen sizes from full HD to iPhone size.. except for my header image which just stays locked in its place when I scale it down, so when it's down to mobile resolution I have to scroll to the right to see my image.
Here's my HTML and CSS codes for the header image:
HTML:
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="images/logo2.png"></p>
</a>
</div>
</div>
CSS:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
Link to my code with a random same size images.. http://jsfiddle.net/hac4cfrn/

Answer 1

If you want it to be responsive and centered, you should set the .container_14 with to 100%, not hardcode it in pixels:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
</a>
</div>
</div>

Answer 2

If you want the .container_14 to adapt to various screens but stay at 1200px width if there’s enough space, then use a #media query:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#media screen and (max-width:1200px){
.container_14 {
width: 100%;
}
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
<header>
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
</a>
</div>
</div>
</header>
You can also add a second #media query for the image inside. It’s also possible without the container.
Otherwise you could just use 100% as a width.