Hi all
I'm pulling out what little hair I have left -- I need some help from a css guru :)
This aside is set at 100% width and contains images that scale as viewport changes.
And here is my media querie:
What I want to have happen is set the float to none and have them stack vertically instead of horizontally.
I've tried #promo-container div { float:none; width:100%; } and a bunch of other combinations, but no luck at all in getting them to stack on top of each other.
What am I missing?
Thank you!
I'm pulling out what little hair I have left -- I need some help from a css guru :)
This aside is set at 100% width and contains images that scale as viewport changes.
HTML Code:
<aside id="promo-container" class="overflow" style="background-color:#fff; border-top:1px solid #000000; margin-top:-5px; height:auto;">
<div style="width:31.25%; float:left; margin-left:1.9%;"><img src="Images2013/PromoImages/MadeInAmericaPromo.jpg" /></div>
<div style="width:31.25%; float:left; margin:0 1.041667%;"><img src="Images2013/PromoImages/DownloadCatalogPromo.jpg" /></div>
<div style="width:31.25%; float:left; margin:0;"><img src="Images2013/PromoImages/SamplePromo.jpg" /></div>
</aside>HTML Code:
/* Note: Design for a width of 320px */
@media screen and (max-width: 767px)
{
#page-wrap { width: 300px; }
#home-master-aside { display:none; }
}I've tried #promo-container div { float:none; width:100%; } and a bunch of other combinations, but no luck at all in getting them to stack on top of each other.
What am I missing?
Thank you!