Digital experiences for all disciplines
New Landing › How can we help? › Themeforest Theme Support › Dante › Responsive Visibility
New Landing › How can we help? › Themeforest Theme Support › Dante › Responsive Visibility
- This topic has 5 replies, 2 voices, and was last updated 10 years by
Swift Ideas – Ed.
Viewing 6 posts - 1 through 6 (of 6 total)
-
Posted in: Dante
-
November 26, 2013 at 1:59 pm #33494
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.
November 26, 2013 at 6:03 pm #33615Hi 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
November 26, 2013 at 6:07 pm #33619Thank 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.
November 27, 2013 at 12:02 am #33741Nothing 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
November 27, 2013 at 12:11 am #33748Thank you Ed,
Can you give me the classes you used in your demo ?
Best
P.
November 27, 2013 at 12:21 am #33756If 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
-
Posted in: Dante
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in and have valid license to reply to this topic.