Picture in different size with media queries

Question

I have the following problem. I want a picture for each device represent in different size. Provide examples I have only once brought Apple devices. Later I would like general media queries. However, the image is always displayed in originial size. Where is my mistake?

Also, I use bootstrap 3.

Html-Code

<div class="widewrapper main">
      <img src="dev/img/black_linen_v2.png">
</div>

CSS-Code:

@import '../bootstrap-3.0.3/bootstrap';

/* iPhone 4 (landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 4 (portrait) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 5 (landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPhone 5 (portrait) */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
.widewrapper.main img {
            margin-top: 75px;
            height:10px;
            width: 100%;
    }
}

Can anyone help me? Sorry for my bad english. Thank you.

Answer 1

You have the same code in each media query?

.widewrapper.main img {
        margin-top: 75px;
        height:10px;
        width: 100%;
}

Thus your image is the same size....You need to put different values in media queries to see some effect.

Try changing the image width like width: 100px or width: 75% in different media queries..

Also remove the height attribute then.

Answer 2

You are overwritting the image attribute.So, try putting important next to attribute to give maximum priority.Don't give important to all the attributes...

Eg, .widewrapper.main img {margin-top: 75px !important;height:10px;width: 100% !important;}