Responsive CSS on row of images
I'm trying to display a row of logos below the slideshow here: http://www.gordontraining.com/
(To see it, please use the css editor in the firefox browser, or whatever you use. Just remove the very last line in the style.css that has display: none. I can't let them show until it looks correct.)
I need to keep them responsive. All the images are the same height, but obviously different widths. So I'm having problems trying to get them all the same height, yet keep their full width instead of reacting to the div column width.
If I set the img width to auto, then they overlap each other.
All the css for that row is at the end of the style sheet.
This is the actual code I'm using to display them:
If you have a better idea for the code itself, that would even be great. I'm just trying to get the responsiveness for different browser view widths.
(To see it, please use the css editor in the firefox browser, or whatever you use. Just remove the very last line in the style.css that has display: none. I can't let them show until it looks correct.)
I need to keep them responsive. All the images are the same height, but obviously different widths. So I'm having problems trying to get them all the same height, yet keep their full width instead of reacting to the div column width.
If I set the img width to auto, then they overlap each other.
All the css for that row is at the end of the style sheet.
This is the actual code I'm using to display them:
<div id="tophomelogos" align="center">
<div class="photosrow">
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/LET.jpg" />
</div>
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/PET.jpg" />
</div>
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/TET.jpg" />
</div>
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/BYB.png" />
</div>
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/SynSell.png" />
</div>
<div class="photoscolumn">
<img class="empphotos wp-image-1158 " src="<?php bloginfo('template_directory'); ?>/images/homelogos/CRW.png" />
</div>
</div>
</div>If you have a better idea for the code itself, that would even be great. I'm just trying to get the responsiveness for different browser view widths.
ASKER
That's better, but still squishing the two long ones toward the right.
I can tell now the heights look like they don't match, but there's some extra whitespace on the bottom of some - I can fix that in the images.
I can tell now the heights look like they don't match, but there's some extra whitespace on the bottom of some - I can fix that in the images.
Please send me the exact url. I'm not sure where I should be looking.
ASKER
It's here: http://www.gordontraining.com/ but I have the css for that row set to display: none. I'm not sure what to use in other browsers, but in firefox I use the css editor of the web developer extension and remove that last css line so I can see it live in the browser while working with it.
I'm sorry I can't let it display while working with it - their site gets too many visitors and they get very fussy about things if they look bad.
I'm sorry I can't let it display while working with it - their site gets too many visitors and they get very fussy about things if they look bad.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I switched it to use display: inline; and they're happy with that even though if the browser gets too skinny they pop down to more rows.
Thanks much for your help!
Thanks much for your help!
like so:
.myClass img {
height:75px;
width:100%;
}