This tutorial is designed to be Previewed in RW and then to switch between Edit and Preview mode when needed to understand what is happening in the settings.
Above is a Container Plus set to have a solid background colour of grey. If you Preview this page you will see nothing above the yellow line.
Why not? Well there is nothing inside the Container to give it any height so no height has been given to it. Therefore, we need to put something inside it or give it some height.
Note.
Bear in mind that some stacks do not have any height such as some sliders or animations. This is not a problem as such, but just something to be aware of with some stacks.
The Container above now containes 3 images which are each 100px high. So the total height of the Container is now 300px, and we can now see the Container grey background. Note how the grey background does not extend wider than the page Base Max Width
setting of 1140px
set in the Source settings at the very top of this page in Edit mode.
The Container above is set to use the Full Width
, which means that it will go edge to edge from one side or the viewing device to the other side.
The Container above is set to have a height of 500px
for all 4 device sizes.
Note that you can also set the height to be proportional to the device the page is being viewed on. So instead of a fixed px value such as 500px
, you could use 100vh
, which will fill the screen. vh
means vertical height and 100vh is full screen or sometimes referred to as a Hero page.
The Container above is set to use 100vh
for the 4 Container height sizes. Be careful to enter the unit of the number. 100
is wrong. 100px
or 100vh
are correct.
Note.
You can have different
vh
values for the different device sizes.
The Container above is set to use 500px fixed height and Flexbox
is enabled
.
The contents (i.e. the 3 images) are set to align with Space Between
. This means that the space between the items will be equal, but it also means something very significant - the top item will be pushed to the top and the bottom item will be pushed to the bottom.
This is the secret of positioning shape dividers such as the mountain triangles shape dividers used on the pages on this Project.
The Container above is set to use 500px
fixed height and Flexbox is enabled
.
So changing the red image for a full width shape divider image, makes the divider stick to the bottom of the Container.
One other thing as happend which is that the Container background has been set to use a Custom CSS created at SVGBackgrounds.com. The code generated by the web site is just pasted as it is, directly into the Custom CSS box.
SVG Backgrounds
These and other CSS backgrounds can be created at sites such as:
SVG Backgrounds
SVG Patterns Gallery
Grabient Mycoloour Gradients
SVGEEZ
The Container above is set to NOT have fixed height and Flexbox is disabled
. In other words the content will set the height of the container and the last item will be pushed down to the bottom of the container
The no2 green image has had 60px
of padding
added top and bottom to space it evenly between the top of the container and the top of the shape divider.
This technique is used on the home page.
The Container above is set to NOT have fixed height and Flexbox is disabled
. In other words the content will set the height of the container and the last item will be pushed down to the bottom of the container
The no2 green image has had 60px
of padding
added top and bottom to space it evenly between the top of the container and the top and bottom of the 2 shape divider SVG images.
Note.
A new SVG shape divider has been added abouve for the top shape divider.
Hint.
If you Google
SVG shape dividers
you may find many suitable SVGs.