Welcome to this Source Tutorial 1.

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.

Max width set to Source setting

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.

Max width set to Full Width

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.

Setting a height for a Container

The Container above is set to have a height of 500px for all 4 device sizes.

Magic Alert!

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.

Height set to 100% of the screen height

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.

Flexbox controls to align stuff

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.

Flexbox controls to align stuff

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.

Background change

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

Using content to size the Container

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.

Using content to size the Container with 2 shape dividers.

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.