My New RWD Flexgrid Header: Did I Do This Right?

[Base12]

I am a new user of WYSIWYG Web Builder and have zero RWD experience (and very little web design experience).

I am creating a header for my new website that will be responsive.

Basically, I nested a LayoutGrid inside a FlexGrid. I then nested the FlexGrid inside of another Layout Grid...



Is that OK?

It appears to work well.

I wasn't sure what the best way was to set a 'fixed' height for the horizontal bars (used for Nav Buttons and Links) above and below the Banner, so I set them using the 'pixel height' option in the FlexGrid...



I don't want those to grow or shrink vertically.

Here is a preview of my first attempt...

https://www.mostholyplace.org/misc/testpages/rwb_header

Here are the files...

https://www.mostholyplace.org/misc/test ... dback1.zip

I am looking for advice, suggestions etc. to make sure I am heading in the right direction.

Thanks!

[Pablo]

I do not recommend to nest different types of layout container.
Also, I am not sure if using pixels for flex grid is the best option. In my opinion, it's better to let the content control the height of the grid item.

I suggest to keep it simple.

[Base12]

Good advice Pablo. I appreciate it!

[crispy68]

There is no need to nest a layout grid within a flex grid within a layout grid. I would think the flexgrid alone would suffice for what is needed but would need to see your actual layout to comment further.

[Base12]

I would think the flexgrid alone would suffice for what is needed...

I was wondering about that. I am going to give that a try.

[Base12]

** UPDATE **

Crispy68 was spot-on. I was able to recreate the entire Header using a single Flex Grid...



I found that if I set the 'fr' (fraction of available space) column settings to reflect the maximum Flex Grid width of 1400 pixels, I can treat them as if they are pixels...



Each column can then be set to the pixel width I want them to start off as (i.e., 100fr/pixels, 600fr/pixels, 600fr/pixels,100fr/pixels = 1400 fr/pixels). Everything shrinks from there.

One thing I learned from the folks here is that the 'sitesearch' input field needs some extra code to make it stretch the full width of the cell...

viewtopic.php?t=99302

There is also an issue with the sitesearch_button wanting to wrap to the next line if placed on the right...

viewtopic.php?t=99306

Here is the code I used from the experts here to correct that behavior...

Code: Select all

<style>
#sitesearch_form{display:flex;width:100%;}
</style>

Now, when I shrink the browser, I get a nice RWD...



I published what I have so far at the main URL...

https://www.mostholyplace.org

I am extremely happy with how it turned out!

God job everyone.