Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Layout Apps
Responsive Layout
Official extension
Version: 0.1.4
Latest version: 0.1.4

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGPg4+Mz1Nfjl1L8f2MmAAz0A3OFonzpAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square","width":110,"height":20,"type":"svg"}}

Responsive Layout allows you to declare layout structures that will only be rendered in a specific screen-size breakpoint.

{"base64":"  ","img":{"width":2840,"height":1428,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1208072,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-responsive-layout-0.gif"}}

This app defines and exports four blocks:

  • responsive-layout.desktop
  • responsive-layout.mobile
  • responsive-layout.tablet
  • responsive-layout.phone

Each block has composition: children, which means that it expects to receive an array of children blocks for rendering if the current screen-size is right for its breakpoint.

Configuration

  1. Import the Responsive Layout app to your theme dependencies in the manifest.json. For example:

_10
"dependencies": {
_10
"vtex.responsive-layout": "0.x"
_10
}

  1. Add the responsive-layout block to your theme. For example:

_36
"store.custom#about-us": {
_36
"blocks": [
_36
"responsive-layout.desktop",
_36
"responsive-layout.tablet",
_36
"responsive-layout.phone"
_36
]
_36
},
_36
_36
"responsive-layout.desktop": {
_36
"children": ["rich-text#desktop"]
_36
},
_36
"responsive-layout.tablet": {
_36
"children": ["rich-text#tablet"]
_36
},
_36
"responsive-layout.phone": {
_36
"children": ["rich-text#phone"]
_36
},
_36
_36
"rich-text#desktop": {
_36
"props": {
_36
"text": "# This will only show up on desktop.",
_36
"blockClass": "title"
_36
}
_36
},
_36
"rich-text#tablet": {
_36
"props": {
_36
"text": "# This will only show up on tablet.",
_36
"blockClass": "title"
_36
}
_36
},
_36
"rich-text#phone": {
_36
"props": {
_36
"text": "# This will only show up on phone.",
_36
"blockClass": "title"
_36
}
_36
},

Note that you could use any array of blocks as children, given that they are allowed by the block that is directly above responsive-layout.

See also
VTEX App Store
VTEX IO Apps