Tips & Tricks

Flatsome Inline Responsive HTML

Knowledge Base > Tips & Tricks > Flatsome Inline Responsive HTML

About this:

In the UX Builder you have the option for some elements to hide or show content for certain screens. By using these attributes you can do the same for content within a text block.

Per example;

This paragraph is visible on Desktop but you cannot see the Mobile paragraph.

This paragraph is visible on Mobile but you cannot see the Desktop paragraph.

HTML code

<div data-show="[attribute-value]">
    <!-- any tag can be used -->
    <p>Content visibility</p>
</div>

The attributes

[attribute-value]:
hide-for-large   <!-- Hide for Desktop, show for Tablet & Mobile -->
hide-for-medium  <!-- Hide for Tablet, show for Desktop & Mobile -->
hide-for-small   <!-- Hide for Mobile, show for Desktop & Tablet -->
show-for-large   <!-- Show for Desktop, hide for Tablet & Mobile -->
show-for-medium  <!-- Show for Tablet, hide for Desktop & Mobile -->
show-for-small   <!-- Show for Mobile, hide for Desktop & Tablet -->

How to use

  1. Use a tag with corresponding data-show attribute

Notes

Any element can be used with these attributes.

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.

Starting a project?

Looking to start a website project for a new Flatsome website or webshop? Already got a Flatsome site but looking to redesign it?

Request a quote

Got a question?

Want to ask a question of request more information on what we do within Flatsome? Shoot us a message or feedback.

Contact us