The example above has three rows:

First Row: the title;

Second Row: the text;

Third Row: the image.

To design this example, start by adding a Container that fills the entire row, type the title inside it, and center the text.


Next, add a second container that also fills the entire row below the first container. Type the text and center it.

For the third row add a third container and put the image inside it.

That's it! Test and resize the browser to check out whether the rows content remains unchanged when you shrink the browser canvas size.

For the final make up, simply format the content of the containers by applying styles you define in style sheets.

Video Recording

To see how the above steps were performed in Service Studio watch the video below.

See Also

About the Grid