- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
So PLEASE don’t tell me I shouldn’t do this, this is a very limited case and I need to do it to bring a 138×86 thumbnail up to about 250px when it’s being rendered at a 320px smart phone resolution. I have the media query set up and I have max-width set to 100%.
Here is the page:
testing.bistromd.com/new-media
set your browser to 320×480 and then scroll to the bottom. You’ll see 4 thumbnails that have successfully collapsed and centered (as designed) but they have a bit too much white space on either side and I’d really like to widen them up a bit.
I’m open to any suggestions except “You shouldn’t scale up a smaller image”…
You have this
.bmdMediaVideoThumbnail {
padding: 0.5em;
display: inline-block; /* display:block in media query */
max-width: 100%;
}
The inline-block
collapses the div to its contents. If you toggle it off in Developer Tools the image ‘scales’ up if in the same media query you set the image within it to have a width…say 80%.
.bmdMediaVideoThumbnail img {
width: 80%; /* approx */
}
SOLVED! Thanks Paulie, both for the quick response and the correct answer…
Great site, will hang around more often…
The final media query looks like so:
@media only screen and (max-width : 386px) {
.bmdMediaVideoThumbnail {
display: block;
}
.bmdMediaVideoThumbnail img {
width: 90%;
}
}