CODEWITHSUNDEEP
htmlcssresponsive-design
user3117275
user3117275

Reputation: 367

Responsive Image resize issue

not sure why header image is not resizing properly. See http://www.insidemarketblog.com

I thought I set it up correctly, but the header image won't resize for mobile device. Any suggestions?

CSS:

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 400px;
}

HTML:

<div id="wrap">
<div class="container_header_image">
<div class="text_box">
<a href="http://www.insidemarketblog.com">
<img id="thesis_header_image" width="400" height="87" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
</a>
</div>
</div>

Upvotes: 0

Views: 110

Answers (5)

user2477011
user2477011

Reputation:

Remove width and height from the HTML. HTML has precedence over anything you define in your CSS.

Edit:

This is a fluid solution.

HTML

<div id="wrap">
    <div class="container-header-image">
        <a href="http://www.insidemarketblog.com">
        <img id="header-image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home">
        </a>
    </div>
</div>

CSS

#wrap{
    width: 100%;
    background: orange;
}

.container-header-image{
    max-width: 400px;
}

#header-image {
    width: 100%;
}

http://jsfiddle.net/dustindowell/W78b3/

Upvotes: 1

Parixit
Parixit

Reputation: 3855

You should change width of container. You don't even need media query.

#thesis_header_image {
    height: auto;
    max-width: 100%;
}
.container_header_image {
    width: 100%;
}

Please check fiddle

Upvotes: 1

Krish
Krish

Reputation: 2660

Modify your css to this

media="screen, projection"
@media screen and (max-width: 400px)
#wrap, .container_header_image {
width: auto;
}

Upvotes: 1

Imran Bughio
Imran Bughio

Reputation: 4931

Add this code at the bottom of css.css

@media screen and (max-width:400px) {
    #wrap{
        width: auto;
    }
}

This will set wrap with to auto on mobile which otherwise will stay 860px.

Upvotes: 2

4dgaurav
4dgaurav

Reputation: 11506

add these styles

media="screen, projection"
@media (max-width: 450px)
.header {
   padding-right: 0;
   padding-left: 0; 

#wrap {
   width: 100%;
}

.container_header_image {
   width: 100%;
}

#thesis_header_image {
width: 100% !important;
max-width: 400px;
height: auto;
}

}

Upvotes: 0

Related Questions