Responsive Visibility

[spb_text_block pb_margin_bottom=”no” pb_border_bottom=”no” el_class=”pb0 mb0″ width=”1/1″ el_position=”first last”] [sf_visibility class=”visible-lg”] [one_third]   [sf_iconbox image=”ss-desktop” character=”” type=”standard” title=”Desktop view” animation=”fade-from-left” animation_delay=”0″] To the right is an example of content that’s perfect for desktop viewing, but not particularly well suited to tablet viewing and mobile devices. Re-size your browser to see how our responsive visibility shortcode allows you to show/hide content. [hr] [icon image=”ss-pointleft” character=”” size=”medium” cont=”no” float=”none”] [/sf_iconbox] [/one_third] [two_third_last] built_for_mobile_retina2 [/two_third_last] [/sf_visibility] [sf_visibility class=”visible-md visible-sm”] [one_third] [sf_iconbox image=”ss-tablet” character=”” type=”standard” title=”Tablet view” animation=”fade-from-left” animation_delay=”0″] Ok, so no we’re at Tablet size you’ll notice the image to the right has changed. This is one is more suitable for tablets. Keep re-sizing to see the phone specific content. [hr] [icon image=”ss-pointleft” character=”” size=”medium” cont=”no” float=”none”] [/sf_iconbox] [/one_third] [two_third_last] respsonsive_vis_tablet_view [/two_third_last] [/sf_visibility] [sf_visibility class=”visible-xs”] [sf_iconbox image=”ss-smartphone” character=”” type=”standard” title=”Phone view” animation=”fade-from-left” animation_delay=”0″] Now we’re at phone size we’ve decided that we shouldn’t use an image. With this handy shortcode your content will always be device appropriate. So… are you impressed? [sf_button colour=”transparent-dark” type=”stroke-to-fill” size=”standard” link=”http://” target=”_self” icon=”” dropshadow=”no” extraclass=””]YES, YOU HAVE BLOWN MY MIND![/sf_button] [sf_button colour=”gold” type=”standard” size=”standard” link=”/features/” target=”_blank” icon=”” dropshadow=”no” extraclass=””]NO, TRY HARDER[/sf_button] [/sf_iconbox] [/sf_visibility] [/spb_text_block]