Moving from adaptive to responsive.

[alan_sh]

For the past two years, my web sites have all been adaptive rather than responsive. So, I've had specific breakpoints and manually arranged things in each BP to suit. All OK, but a lot of work.

Then I "discovered" layout grids and flexgrids. Super stuff. I can put text and images inside these and, as the page size reduces, the text wraps and the images resize. Just what I need. Until I came to try it out for real. And, I can't make it work properly.

I have a small project (link below) with a master page made of two layout grids with text and a menu. That works OK when I reduce the browser page.

I have an index page with a layout grid and a flex grid. The layour grid reduces OK, but the flex grid doesn't. All it does is introduce scroll bars and doesn't rearrange the grids to fit into the browser size. So, what am I doing wrong here? I was hoping that the individual cells would move around and resize.

https://www.dropbox.com/s/b30y53lb2xt5y ... s.zip?dl=1

Any clues gratefully received. And if you want to see my old adaptive design working, it's here https://www.penninescouts.org.uk/index.html

cheers

Alan

[Pablo]

The reason why the flexgrid does not shrink is because the images inside the grid have a fixed size.
To make (flex) elements resizable, you can use the flex grow and flex shrink properties.

See this related tutorial:
https://www.wysiwygwebbuilder.com/flexbox.html

For example, set flexgrow/shrink to '1' for the images

Also, the page alignment (in page properties) should be set to 'do not center this page'.

[alan_sh]

Thanks Pablo. I'm making progress.

Two small thing now:

I've made flexgrow/shrink 1 and 1 and it now shrinks OK. But in full screen, the images are now too big and overlap the headings above. So I tried it making flexgrow to 0 and it made no difference. Bit when I made flexgrow 0, the images in WWB went really small on the screen although the preview showed then the correct size (albeit too big when full sccreen on a 1920 x 1080 screen).

[alan_sh]

Cured the first one by changing from 100px to auto for the row.