CSS resize image not accepting the parameters

Question

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.

I would like to also center the images within the div. What do I have to do?? — Smiley
– Smiley, Commented Apr 2, 2015 at 17:42

KyleMit · Accepted Answer · 2015-04-02 17:31:22Z

1

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.

edited Apr 2, 2015 at 17:31

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Apr 2, 2015 at 17:18

Dimas Pante

2,53124 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Smiley Over a year ago

Thanks. How can I center the picturerow for small screens? I do not want float left in this case.

Wild Beard Over a year ago

@Smiley .pictureflow { width: 50px; margin: auto; }

Smiley Over a year ago

This does not work. @Press Also I do only want it for sizes smaller than 1200px eg. xs, md and sm .

Collectives™ on Stack Overflow

CSS resize image not accepting the parameters

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related