Hi Paul -
<div class="banner banner2">
well that doesn’t make sense to me! You didn’t do it for adbox – 250-wide box doesn’t expand into 300 space. Surely there’s a similar way we could get a block display of 728 to NOT expand into 928? Isn’t the only diff that one is display inline & the other block?
I stole your adbox code for adbanner and tried this:
.btmad{max-width:1200px;margin:20px auto 0;text-align:center;font-size:0;/* white space fix*/}
.adbox{width:300px;display:inline-block;text-align:center;vertical-align:baseline;
font-size:16px;font-size:1rem;}
.adbox img{display:inline;vertical-align:bottom;margin:15px 0;}
.adbanner{display:block;text-align:center;vertical-align:baseline;}
.adbanner img{display:block;vertical-align:bottom;margin:0 auto 15px;}
@media screen and (max-width:768px)
{.adbanner,.adbanner img{max-width:768px}}
@media screen and (max-width:330px;height:auto;)
{.adbanner,.adbanner img{max-width:300px;height:auto;}}
But it doesn’t listen to my @media’s. This is what you originally gave me at:
http://www.sitepoint.com/community/t/images-for-different-screen-widths/189403/3
quote: “depending on the image and dynamics of the page you could just scale the image smaller.”
.banner{
max-width:728px;
min-width:300px;
margin:auto;
}
.banner img{width:100%;height:auto;}
A problem might be that adbanner is stuck inside adbtm but I need it that way.
So you’re saying I must do it like you’ve always told me? And every time I get a new banner size, I must ad it to the css, e.g.:
.banner{max-width:728px;min-width:300px;margin:auto;}
.banner2{max-width:928px;min-width:300px;margin:auto;}
.banner img,.banner2 img{width:100%;height:auto;}
Sorry it’s ul in subscribe area, not blockquote. I’ll fix that!
Yes there is a #txtnav! I’ll try your advice for its ul & li tomorrow. Right now I’m rushing to an Elvis musical of Twelfth Night – we’re promised it’ll have Jailhouse Rock.
thank you! - Val - http://greensmoothie.com/1cde/1mst-test.php