CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Smiley
Smiley

Reputation: 599

CSS resize image not accepting the parameters

I am trying to resize an image. Bootstrap is enabled.

enter image description here

Here's my CSS:

/*Custom picture fix*/
@media(max-width:600px){
  .picturerow>img {
    width: 10px;
    height: auto;
  }
}

Here's my HTML:

<div class="picturerow">
    <ul>
        <li><img src="{{ asset('assets/img/icons-medium/facebook-medium.png') }}" alt="facebook-icon">  </li>   
        <li><img src="{{ asset('assets/img/icons-medium/linkedin-medium.png') }}" alt="linkedin-icon"> </li>   
        <li><img src="{{ asset('assets/img/icons-medium/twitter-medium.png') }}" alt="twitter-icon"> </li>   
        <li><img class="img-responsive" src="{{ asset('assets/img/icons-medium/xing-medium.png') }}" alt="xing-icon"> </li>   
        <li><img class="img-responsive"  src="{{ asset('assets/img/icons-medium/google-medium.png') }}" alt="google-icon"> </li>   
     </ul>
</div>

What am I doing wrong?

The pictures should all be displayed inline, and for screen sizes of md and smaller (no less, sass etc) they should be displayed in the middle. On the very small screens, the pictures should all be 15px width and keep the ratio.

Upvotes: 0

Views: 64

Answers (1)

Dimas Pante
Dimas Pante

Reputation: 2521

Probably the Bootstrap's class img-responsive is overwriting your custom class.

More importantly, when you use >, like in .picturerow>img, you're telling CSS that the images are a direct child of the picturerow div, which is false because you have <ul> and <li> before.

Upvotes: 1

Related Questions