responsive icon cols

[jonnyfreak]

i have nine icons that i want to cover the full width of the page and as the page scales down i want them to go under each other but what i gave done doesnt seem to work. I have only set one device size so far until i get it working


<style type="text/css">
.icon-full-width { padding: 10px;
}

.icon-div {
padding: 1%;
width: 9%;
float: left;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.icon-div {
display: block;
}
</style>




<div class="icon-full-width">
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
<div class="icon-div"><img src="images/icons/icon.png" width="56" height="55" >icon label</div>
</div>

[Beverleyh]

You have to change/remove width:9%; because its currently in the global scope of all CSS so icons are always going to be 9% of their container.

Try moving/setting it to inside your media queries, with a different value at your chosen breakpoints. A higher value will cause the icons to wrap sooner.

[mlegg]

Bev thwir height and width are only numbers, there is no px or em or anything

[Beverleyh]

Bev thwir height and width are only numbers, there is no px or em or anythingWhat's your point? (BTW they are pixels)

[molendijk]

What's your point?
He mistakenly means that in something like <img src="images/icons/icon.png" width="56" height="55" > the pixels are missing.
Mlegg, you can do this for images. The attribute 'width' is allowed on element img (but not, for instance on element div). It's even forbidden to do width=56px.
But you can / must do: <img alt="" src="images/icons/icon.png" style="width: 56px; height: 55px" >

[Beverleyh]

He mistakenly means that in something like <img src="images/icons/icon.png" width="56" height="55" > the pixels are missing.

I surmised that's what he meant but I don't know what the point is in relation to the OP's question.

[molendijk]

The point in relation to jonniefreak's question is that if width="56" height="55" were incorrect (which it is not), then that might explain (in mlegg's mind) the problem.

[Beverleyh]

One can only guess. Ho hum