Media Screen

[column size=“col-6″ bottom_margin=“true“][h5]Supported by Shortcode Generator[/h5]This shortcode is super awesome. The greatest thing is that you can create it in 2 clicks with our Shortcode Generator and you can use it with any page element.[/column]

[column size=“col-6″ last_column=“true“ bottom_margin=“true‘][h5]Different content for different device[/h5]You can display content only on devices you want. Have a look at the example bellow. Try resizing your browser to see this shortcode in action.[/column]

[clear]

[separator]

[section]
[column last_column=“true“]

[screen size=“desktop“]

 [icon icon=“icon-eye-open“ size=“90px“ color=“ff7700″]

[infobox last_column=“true“ bottom_margin=“false“ closable=“false“ color=“grey“]This content is visible only on Desktop screens.[/infobox]

[/screen]

[screen size=“tablet“]

 [icon icon=“icon-globe“ size=“90px“ color=“c21e60″]

[infobox last_column=“true“ bottom_margin=“false“ closable=“false“ color=“blue“]This content is visible only on Tablet screens.[/infobox]

[/screen]

[screen size=“phone-landscape“]

 [icon icon=“icon-bolt“ size=“90px“ color=“3355ff“]

[infobox last_column=“true“ bottom_margin=“false“ closable=“false“ color=“red“]This content is visible only on Phone Landscape screens.[/infobox]

[/screen]

[screen size=“phone-portrait“]

 [icon icon=“icon-heart“ size=“90px“ color=“336699″]

[infobox last_column=“true“ bottom_margin=“false“ closable=“false“ color=“green“]This content is visible only on Phone Portrait screens.[/infobox]

[/screen]

[/column]

[/section]

[separator text=“How to use“]

[infobox last_column=“true“ size=“col-12″ color=“blue“]Notable comes with super awesome user friendly Shortcode Generator which allows you to create any of many shortcodes in less than 2 clicks. If you prefer the code, you can find it bellow. You can copy-paste it to your page. Comments are annotated with double slashes //[/infobox]

[clear]

[section]

[toggle title=“Get the code“]

// Create desktop screen content only
[screen size="desktop"]Your content goes here[/screen]

//Create tablet screen content only
[screen size="tablet"]Your content goes here[/screen]

//Create phone screen content only
[screen size="phone"]Your content goes here[/screen]

[/toggle]

[/section]

[separator small=“true“]

[h5]Available argument options[/h5]
[list]

[list_item icon=“icon-cog“]screen – Specify your target screen. You can use following : desktop, tablet, phone, phone-landscape, phone-portrait.[/list_item]

[/list]