Hi,
I am trying to set up my CSS so that images for screen devices larger than 1200px use a thumbnail. Devices smaller than 1200px should not use thumbnails.
So far it isn't working, and I can't tell what I'm doing wrong.
This is the media query that I'm using:
Code: Select all
@media non-print and (min-width: 1200px)
{
img
{
mc-thumbnail: popup;
mc-thumbnail-max-width: 620px;
mc-thumbnail-max-height: auto;
}
}
Images in any screen output don't use thumbnails when I do this, but removing the
and (min-width: 1200px) causes all screen outputs to use thumbnails. I've also tried putting in media queries below the above to explicitly set mobile and tablet outputs to mc-thumbnail: none; and this didn't work either. I have body set to 36em, which is smaller than 1200px, but I thought min-width is based on screen size rather than the size of the container, so I wouldn't think that this would be the issue.
Does anybody have an idea on what I can do to get this working?