Can anyone tell me if it’s possible to change one image for another at a certain break point?
I’m building an inline responsive site and certain flexible images get too small at a 640px breakpoint and I’d like to change them for a different format of the same image that works better at the smaller screen size. But if I change the image at that break point it of course changes the image for all the larger break points. Help!
There was also this CSS Tricks discussion-- which I have not tried, but looks promising. I’m not sure it addresses the problem of downloading the larger image files in the background on mobile devices.
No CSS knowledge required. You can do this in Freeway 7 without having to resort to markup items.
Add a background image to a container item, select a breakpoint and change the background image for another image. Freeway will write the correct code for you and swap the image when the user hits the specified browser width. Background images have their own usability issues but if you just want to change images this is the quickest and simplest way of doing so in Freeway 7.
Regards,
Tim.
Or in Freeway 7 Add two images at your default page size. Turn “display” off in the inspector palette for one of them. Then at your desired break point turn display on again with the other off to swap out the images.
David Owen { Freeway Friendly Web hosting and Domains }
On 25 May 2015, at 20:13, Tim Plumb email@hidden wrote:
Add a background image to a container item, select a breakpoint and change the background image for another image. Freeway will write the correct code for you and swap the image when the user hits the specified browser width. Background images have their own usability issues but if you just want to change images this is the quickest and simplest way of doing so in Freeway 7.
Thanks for your responses and apologies for my late reply.
Tim - thanks re the background images, that’s the solution I’m currently using and I can confirm that it does work a treat, I guess my concern was that maybe this wasn’t the best way to do it and also if the site is viewed on a screen size that isn’t covered by the break points then the edges of the image will be cropped off as it’s not flexing to fit.
DeltaDave & David - thanks and yes understand the theory of this but having tried it I’m lost on how I can get two images to essentially occupy the same space. I can achieve it if the second image to be turned on at the smaller break point is a floating layer but then it doesn’t ‘interact’ with the other elements on the page - i.e. causing text boxes to move with it etc, unless of course I’m doing it wrong!??
Big Erns - thanks for the link, I’ll give it a read as I’m keen to learn all I can about CSS.
I knew that you had said that originally but later you said “it doesn’t ‘interact’ with the other elements on the page” which made me suspect that not all of your elements were inline.