Image thumbnails not working with media queries

This forum is for all Flare issues related to styles, stylesheets and XML.

Image thumbnails not working with media queries

Postby IndyF on Thu Apr 02, 2020 12:40 pm

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?
IndyF
Jr. Propeller Head
 
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Postby Psider on Thu Apr 02, 2020 5:13 pm

I'm not sure 'non-print' is a valid @media type. Can you try @media screen instead?
Psider
Propellus Maximus
 
Posts: 646
Joined: Wed Jul 06, 2011 1:32 am

Re: Image thumbnails not working with media queries

Postby IndyF on Thu Apr 02, 2020 5:23 pm

Good suggestion, but it doesn't change anything unfortunately.
IndyF
Jr. Propeller Head
 
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Postby Psider on Sun Apr 05, 2020 5:45 pm

Just re-reading "I thought min-width is based on screen size". It's actually the browser viewport (in simple terms, the width of the browser window, but in reality is much more complicated because reasons). For tablet and phone this likely means the screen width, but not necessarily on a desktop pc. So make sure your browser window is maximised/definitely wider than 1200px on your monitor?

Do note, I'm just going on the regular CSS, not the madcap specific stuff as I don't currently have access to Flare. I have no idea if the thumbnail stuff is written "to spec". :)
Psider
Propellus Maximus
 
Posts: 646
Joined: Wed Jul 06, 2011 1:32 am

Re: Image thumbnails not working with media queries

Postby IndyF on Sun Apr 05, 2020 8:41 pm

Thanks for letting me know that :) the browser window is definitely wider than 1200px on the monitor.

I tested the media query with a property that isn't related to thumbnails - border-radius - and this worked, so it seems that the issue is with the madcap thumbnail properties. I know they work outside a media query, since I've tested that also.

Does anyone know if this is a bug with the thumbnail properties? Or if madcap properties in general don't work with media queries?
IndyF
Jr. Propeller Head
 
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm

Re: Image thumbnails not working with media queries

Postby Dave Lee on Mon Apr 06, 2020 5:34 am

I'd guess that Flare doesn't actually support different thumbnail settings in media queries.

It works with border-radius as that's just regular CSS.

Thumbnails don't just use CSS though; if you look at the generated HTML code, the <img> tag points to the thumbnail, and it's enclosed in a link (<a> tag).

So I can't see this working the way Flare currently implements thumbnails.
Dave Lee
Master Propellus Maximus
 
Posts: 5824
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Image thumbnails not working with media queries

Postby IndyF on Mon Apr 06, 2020 1:50 pm

Ahh okay, that makes sense then.

Thanks for clearing that up Dave!
IndyF
Jr. Propeller Head
 
Posts: 4
Joined: Wed Apr 01, 2020 6:12 pm


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: Google [Bot] and 4 guests