Moving from adaptive to responsive.

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
alan_sh
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Moving from adaptive to responsive.

Post by 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
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Moving from adaptive to responsive.

Post by 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
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Re: Moving from adaptive to responsive.

Post by 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
 
 
Posts: 1680
Joined: Tue Jan 01, 2019 5:50 pm

Re: Moving from adaptive to responsive.

Post by alan_sh »

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