Thumbnails on phone/tablet don't respect max-width

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
diemetric
Jr. Propeller Head
Posts: 6
Joined: Thu Oct 03, 2019 5:07 am

Thumbnails on phone/tablet don't respect max-width

Post by diemetric »

What the heck am I missing?

The style sheet we're using is fairly stripped down/basic. The <img> style has only these properties set:
border: none
max-width: 100%

Scenario:
1. Place an image (larger than the width of a phone screen) in a topic. It has the basic <img> tag applied to it.
2. Place copy of the same image above or below the original (only to compare/test them in the output).
3. Make the second image a thumbnail (height = 48 px, width = automatic).

The ONLY difference between the two images is the thumbnail assignment. Both images are inside <p> tags that simply add space above and below the paragraph (primarily for print output).

In the output on a desktop browser: both images behave as intended. When you resize the browser window, the <img> image resizes and when you hover over the thumbnail version, the image opens in a pop-up, which will also resize, respecting the 100% max-width property.

On both a phone and a tablet: the <img> image works as intended (resizes properly), but the thumbnail does not. It opens the image at its original size, not as a pop-up. You have to go "back" to return to the topic. Testing in Chrome on both devices. Pop-ups are allowed.

The images in the Flare help behave as described here, so I know this can work. I've tried including the images without the <p> tags. I've tried using a custom img.Thumb class. I've tried putting them in <div>s. I've googled until my eyes bled and a mysterious gray liquid seeped out of my ears.
Halp.
Post Reply