Responsive Images not available?

[GeeShpherd]

Hello, I am using Flare 11 to make a Guide. I have images in the file that I want to be responsive. So I went into the Styles.css and put my css for all images to be responsive:

Code: Select all

img {
width:100%;
height:auto;
}

However, when I add this code. The images disappear. This CSS works in my other HTML documents I've used in the past and it works fine. It even works in the preview in Flare. But once it gets on the browser, the images disappear.
How do you fix this?

UPDATE AND SOLUTION: I gave up on this issue but have come back to it and I believe I have found a solution. Use this code:

Code: Select all

img {
max-width:100%;
height:auto;
}

The max-width HTML property seems to work well for my needs. It allows images to be responsive while maintaining their original size (So you don't have small images filling up the entire width of the screen). And they don't disappear neither. So I hope this helps some people in the future!



ANOTHER UPDATE: 5/24/2016

So sometimes you have small images that you want to be responsive, but the max-width:100% makes them too large. And making them max-width:50% makes the image smaller, but when you resize, the image only takes up half the width of the page, which looks bad on mobile.

HOWEVER, say your small image is 401px. If you set max-width to 400px, the small image will then take up the full screen width, which can look bad. This is because for some reason, max-width needs to greater than or equal to the original width of the image.

Example:
If you have an image that is 400px, and want to keep the original width of that image, but also make it responsive so that when the screen width goes below 400px, the image will start to re-size, you would need the code:

Code: Select all

img {
width:100%;
height:auto;
max-width:400px;
}

[rogersm]

Hi there,

Unfortunately I don't have an answer to your issue, but I would also like to know how you make images responsive if anybody knows?
We have a lot of screenshots in our documentation so I don't know whether I should do something to make them responsive or (if the screenshots are just not suitable to display on a mobile/tablet type device because of their size) remove them from the display of these types of devices. I don't know if it is possible to specify that images should be removed if the size of the device reaches a specific size.

Also, in general, are there any guidelines in flare for responsive design? For example, I am wondering if image pop-ups and drop-downs are responsive friendly.

thanks,
mark

[NorthEast]

As a very simple solution, you could try something like this which means the image is never wider than the screen (for small devices):

img.screenshot
{
max-width:100%;
}

Depends if that suits your need, or you want actual 'responsive design'.
For example, if you want different image sizes at different screen sizes; then you'd have to set up your own media queries with the breakpoints for each screen sizes, then in each media section you can set the image style properties (for that particular screen size).

[rogersm]

Hi Dave,

Okay, thanks very much for that.

mark

[emceewhiterabbit]

Flare 11 uses Foundation 5.5. According to their docs, you can use "small-12" as a class to set the image to the full with of the screen.

i.e.

Code: Select all

<img src=../source.jpg" class="small-12" />

Foundation with Flare doesn't handle images very well but I've found this to be the best solution. For very small images do not include 'small-12' to its class.

[bianca_writer]

GeeShpherd, thanks for posting your code and the updates! I was able to copy/paste your updated code and successfully use it in my project. Thank you so much for saving me a lot of time!