Hi, In this Page I have Icon Images that I want to be responsive.
I have this on my icons:
.icons-iog {
max-width: 100%;
height: auto;
}
However it is not re-sizing as it should, they are 200 x 200 pixels each
Your code is working for me in Chrome. Where are you seeing it not working?
It gives me this and it stops from getting even smaller when it should.
Do you see it shrink all the way when you re-size the browser?
It depends on what you are looking for. The layout itself is not really responsive, being stuck at a certain width, so if you want a fully responsive layout, you’ll need to go up the “food chain” a little way, and investigate the container styles etc.
The icons themselves are just doing what they’re told by the overall layout.
csosa, you need to move the link to the local stylesheet so it is the last stylesheet in the cascade on this page, too.
1 Like
It looks as if you are trying to use “display table” on the icons, since you have .icon-rows figure {display: table-cell;} but the parent elements are not set up for it.
You also need:-
#industries-icons {display: table;}
.icon-rows {display: table-row;}
to make that work.
Actually im making display table:cell initially to make
them shrink as the browser width changes.
I am using:
icons-iog {
max-width: 100%;
height: auto;
}
on the images but something is preventing
them from getting even smaller.
and I changed it to this:
.icon-rows {
display: table;
table-layout: fixed;
}
.icon-rows figure {
display: table-cell;
}
I currently Have a temporary fix:
@media (max-width:800px) {
.icon-rows figure { /*Temporary Fix */
display: table-row;
margin: auto;
}
.icon-rows {
margin: auto; /*Temporary Fix */
}
. icon-cap {
margin-bottom: 20px;
}
}
but I do want to figure out why
the icons are not sizing down all the way.
Yeah I believe it is the images themselves
they dont get any smaller…
Here ya go gettin` silly again. 
Just in case, though, I decided to see how tough they are. Ya got your images folder handy? Drop this file just above it and double click to open. No, it doesn’t use bootscrap nor any of your other CSS.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#industries-icons {
display:table;
table-layout:fixed;
width:100%;
}
.icon-rows {
display:table-row;
}
figure {
display:table-cell;
vertical-align:top;
outline:1px solid magenta;
}
figcaption {
word-wrap:break-word; /* temporary; for testing only */
}
img {
display:block;
background-color:#ddd;
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<div id="industries-icons">
<div class="icon-rows">
<figure>
<img class="icons-iog" src="images/shippingicon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">SHIPPING</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/transformer_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">TRANSFORMER</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/aviation_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">AVIATION</figcaption>
</figure>
<figure>
<img class="icons-iog"src="images/electronics_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">ELECTRONICS</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/auto_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">AUTO</figcaption>
</figure>
</div>
<div class="icon-rows">
<figure>
<img class="icons-iog" src="images/tech_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">TECHNOLOGY</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/instrumentation.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">INSTRUMENTATION</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/chem_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">CHEMICALS</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/furniture_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">FURNITURE</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/nuclear_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">NUCLEAR</figcaption>
</figure>
</div>
<div class="icon-rows">
<figure>
<img class="icons-iog" src="images/powerenergy_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">POWER & ENERGY</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/fooddrink_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">FOOD & DRINK</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/manu_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">MANUFACTURING</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/solar_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">SOLAR</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/science_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">SCIENCE</figcaption>
</figure>
</div>
<div class="icon-rows">
<figure>
<img class="icons-iog" src="images/glass_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">GLASS</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/medical_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">MEDICAL</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/defense_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">DEFENSE</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/dental_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">DENTAL</figcaption>
</figure>
<figure>
<img class="icons-iog" src="images/glasses_icon.png" alt="" width="200" height="200"><br>
<figcaption class="icon-cap">OPTICS</figcaption>
</figure>
</div>
</div>
</body>
</html>
csosa-images.html (4.8 KB)
I just didn’t want you to blame the problems on those poor little images.
well its because I thought it was the padding-left that was affecting it
from my testing, but I see it was the outer container.
and this:
.icon-rows {
display:table-row;
}
I figured most of you don’t like this framework 
Yeah, @ralphm mentioned that you needed to look higher up the food chain.
Wait! Now how do you figure that is part of the problem? Several of us have made sure that was included in the CSS. What are we missing?
Bootstrap is probably one of the more popular frameworks. I don’t happen to care for any of them for smaller, customized sites because too many people a) don’t know how to use them, and b) don’t know how to customize CSS. In workgroups, a good framework can help tremendously.
You want these images to resize within table-cells on your web page in bootstrap. I find it easy outside of the framework. Apparently, it’s not so easy inside it, though… until you learn the framework.
what is another good framework other than Bootstrap?
Foundation.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.