Show content in responsive columns

Tabs does not make content responsive or non-responsive and it does not apply any formatting or styling to tab content.

For help with responsive content, please contact your theme developer.

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, the following 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.

Responsive content is only responsive in the theme, it is not responsive in the rich text editor.

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, <>.

    The Show HTML button
  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 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.

Still need help? Contact Us Contact Us