Show content in responsive columns

Content is considered responsive when it adapts to the device it's being viewed on, most commonly by using the screen width to determine the optimal layout.

Almost all themes include a responsive grid system that allows content to be made responsive by adding certain class names to HTML elements.

For example, this grid system shows content in one column on small screens (phones), two columns on medium screens (tablets), and four columns on large screens (desktops):

<div class="grid grid--1-col grid--2-col-tablet grid--4-col-desktop">
  <div class="grid__item">Content</div>
  <div class="grid__item">Content</div>
  <div class="grid__item">Content</div>
  <div class="grid__item">Content</div>
</div>

The exact code for the grid system is different for every theme.

To show content in responsive columns:

1. Determine the code to use for the theme's responsive grid system.

   The code is specific to the theme, so if you're not sure which code to use, please ask your theme developer.

2. From your Shopify admin, go to Products.

3. Click the name of the product that you want to edit.

4. In the rich text editor, click Show HTML, .

   

5. In the HTML, add the responsive grid code.

   Make sure to add the code below the heading that the tab is created from.

6. Click Show editor, .

7. In the rich text editor, edit the responsive grid content.

8. Click Save.

In a ProTab

To show content in responsive columns in a ProTab:

1. Determine the code to use for the theme's responsive grid system.

   The code is specific to the theme, so if you're not sure which code to use, please ask your theme developer.

2. From the main menu in the Tabs Studio app, click Tabs.

3. Create a new ProTab or click the title of the ProTab that you want to edit.

4. In the rich text editor, click Source code, .

5. In the HTML, add the responsive grid code.

6. Click Save to save the changes.

7. In the rich text editor, edit the responsive grid content.

8. Click Save to save the ProTab.