Css not working to resize imgs

HTML & CSS
1

Hello all. gm.
i have this code


#cta .col-sm-12 .col-xs-12  img{
width:80%;
height:auto;
margin: 0px auto;
border:3px solid #ff0000;
}

basically want it to only resized the images for the cta div when it hits the smaller sizes.
I also tried


#cta.col-sm-12.col-xs-12  img

Neither work. My impression is that my code is correct. Why is it not working?
Thank you
dlm

2

pdxSherpa,

With almost 700 posts to your name, you KNOW that we need to see HTML and CSS together to know how they work together, otherwise you are asking us to GUESS… SPECULATE… and that gets old.

Please give us some HTML that includes all of the classes and IDs that you are showing in the CSS and any other CSS that affects that HTML. An example that we can work with.

Thank you.

3

Hi,

We need to see the html to tell if the css is targeting anything :slight_smile:

4

arghhh ok sorry!
didn’t want to come accross as over promoting & thought the code would be simple

It is on the main page
http://apdinnovate.com/

working to complete this
when i re-size to small & extra small it looks to me that the images are a bit overwhelming.

Sorry ronpat, maybe another 700? :smiley:
D

5

When you say “the smaller sizes”, what page width do you mean? Right now, the only breakpoint for div#cta seems to be around 975px (which does seem to make the images rather large), but I’m not sure what would work better. You might try breaking them into two rows of two at 975px and then 4 rows of one at a narrower width such as 600px or so. Is that what you are thinking about?

Back to your original question:
Unless there are specificity issues,


#cta div img
(or)
#cta .col-sm-12.col-sx-12 img

should target all images nested within


<div id="cta" class="row-fluid">
    <div class="col-md-3 col-sm-12 col-xs-12">
        <img...>
6

Thank you Ronpat!
Apologies for not replying earlier. Life got a bit in the way. Code was very helpful.

7

Hi Sherpa,

Thanks for the feedback, Daniele.

My code examples were fairly short so I thought I’d add a couple more using the examples in your original post.
(In these examples, the outer layer is number 1 and there could be more classnames in each level.)


#cta .col-sm-12 .col-xs-12  img {}

This selector would address all <img> tags at or more than 4 levels deep.
The spaces between the ID and the classnames indicate separate levels or layers. Like this:


<div id="cta">
    <div class=".col-sm-12">
        <div class=".col-xs-12">
            <img>

This selector expects the ID and classes to be in the same <div>:
No spaces indicate the ID and classes are assigned to the same tag.


#cta.col-sm-12.col-xs-12  img {}



<div id="cta" class="col-sm-12 col-xs-12">
    <img>

That’s why we needed to see the HTML, as @paul said, so we could see if the CSS is targeting anything.

Hope this makes sense.

Cheers :slight_smile:

8