Flood theme-responsive banner images

philn67

Images set up in the banner do not resize when the browser window is smaller, the border re-scales but the image doesn't (www.philnortonphotography.co.uk/test).
According to Will at Flood, images added to extra content 4 will rescale. Having bugged Will enough over other things I thought maybe I could ask here......Help! So Ive read all the Flood help guide, got the extra content stack, watched the videos....but whatever I do I get no content. I don't understand what Im doing wrong, and don't understand why you would have to use an extra content area to get a banner that will scale images, and not the banner area? Puzzled and confused and really don't know what to do or whats going wrong....anyone familiar with Flood and how I can get a banner with images that will fit when scaled down?

Bikeman

Did you try replacing the placeholder banner images in the theme and selecting one of these to see if it resizes properly without using EC4?. Will has info on his site's theme manual on how to replace them. There are 20 spots available for your images. I mention this becuase the built in banners rezise properly for me. Also the images you choose of course need to be at least the width of the width you set in the theme, for example if you choose responsive 1040 and a 300 high banner image should be cropped to 1040x300 before replacing placeholder stock images.

Also I see on his RAFT info two items that may help you with resizing images responsively. Both go in Page Info -> Header -> CSS tab.

To resize any image on page responsively add the following:

img {
	width: 100%;
}

To change banner height on smaller screens:

.raft800 #bannerWrapper {
	height: 100px;

}
change the hight as you see fit

philn67

Hi Bikeman, thanks for your time again! I emailed Will and his reply was no extra coding is needed, images added to extra content area will scale.....so i researched and can't get anything sorted out. Feeling rather dumb and a nuisance, but I can't figure it out. Yes I added images in the correct way, and read through all Will's online manual. Admittedly I did not resize the images correctly as I was just testing ( I used RW multitool and used the tools to scale rather than resample them @ 1040x650, 72pdi) and also admittedly I did read through the notes on RAFT, but missed the RAFT link for more detail. So as you said images scaled for you, I went back, started a new project with defaults, and the images don't scale for me. I have the default 1040px wide, banner with default image, but when I change the size of the page the image doesn't scale at all, it effectively becomes cropped.
Screen shot 1 shows the original banner image with the window resized smaller width, with the banner image cropped on the right.
Screen shot 2 shows RAFT mode enabled and the cropping more severe. Ive tried the codes but again I don't achieve anything. When you say they resize for you, do you mean the whole image is displayed without cropping?
Thanks again

Patrick Houlihan

Page Inspector > Styles

Flood's last category in the Styles panel is Miscellaneous. Do you have Responsive Image Scaling checked?