How to create responsive content

Responsive theme work by re-organizing your content to display in mobile. The layout of your site will look different than the desktop version since the view port size is dramatically smaller. This tutorial show you how column works in responsive mode, so you can create the layout you want when the site is viewed in mobile.

2 column display

When using columns, you can display content in separate rolls or in the same roll but in different column. When you display content in two or more rolls, the column element will get stacked on top of each other independent for each roll.

Ex.:

2column-display

This show a 3 column content with the images in 1 roll and the text in a second roll. While visually, they look like they are part of the same column display, the elements are actually separated into 2 rolls.

When the site is in mobile view, here is how the content going to stack:

2column-display-mobile

1 column display

When content is placed in the same column, it stays together when the columns are stacked in mobile view.

Ex.
1column-display

Here the image and its corresponding text are in the same roll within the same column. They will be count as a group rather than independent elements. So when the site is in mobile view, here is how the image and text will be stacked:

1column-display-mobile

Tags: , , , , , , ,