Responsive Visibility

[wondertracker]

Hi,

Working in mamp environment for now and the responsiveness of the theme seems kind of buggy. Some pictures are overlapped and some “sections” on my main page simply disappear when resizing window.

Also, I wanted to know if the example on your demo page:

http://dante.swiftideas.net/shortcodes/responsive-visibility/

needs any special setup?

Thank you

P.

[Swift Ideas – Ed]

Hi there,

Would be interested to see what you’re seeing if you could get a live test site set up? We have tested the theme extensively in the responsive department, and not seen any issues so would be keen to help you out here.

The responsive visibility works based on the extra classes used for each asset. This is the code for the page:

[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]

<img class="mb0" alt="built_for_mobile_retina2" src="http://dante.swiftideas.net/wp-content/uploads/2013/03/built_for_mobile_retina2.png" width="1540" height="1160" />

[/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]

<a href="http://dante.swiftideas.net/wp-content/uploads/2013/11/respsonsive_vis_tablet_view.png"><img class="alignnone size-full wp-image-11596" alt="respsonsive_vis_tablet_view" src="http://dante.swiftideas.net/wp-content/uploads/2013/11/respsonsive_vis_tablet_view.png" width="492" height="998" /></a>

[/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]

– Ed

[wondertracker]

Thank you Ed,

I’m not worried at all 🙂 I can see that the theme is rock solid…

I will go live testing soon and see thoroughly how everything works and will keep you posted..;

Just to know… Do we need to do something extra to see the same effect as on you demo page (you know where the image disappear accordingly) ?

All the best

P.

[Swift Ideas – Ed]

Nothing extra needed, just add in one or more of the responsive visibility classes into the extra class box in the page builder asset – http://getbootstrap.com/css/#responsive-utilities

Hope that helps! Let us know once you go live.

– Ed

[wondertracker]

Thank you Ed,

Can you give me the classes you used in your demo ?

Best

P.

[Swift Ideas – Ed]

If you mean on the responsive visibility page, you can see in the code above, or simplified below:

[sf_visibility class="visible-lg"]
desktop content
[/sf_visibility]
[sf_visibility class="visible-md visible-sm"]
tablet content
[/sf_visibility]
[sf_visibility class="visible-xs"]
phone content
[/sf_visibility]

– Ed