-
AuthorPosts
-
March 29, 2017 at 9:44 pm #769111
Dear Masters of WordPress Templates,
Great template you created!I want to have links to my social profiles (Instagram, Facebook, Youtube) within a one page portfolio. I want to use large icons.
The problem: When I use http:// Links to a facebook page, they open in browsers on mobile phones instead of in the app.
And vice versa: When using fb://page/xy format, they won’t open in the browser.How to use browser links on computers and app links on mobile devices?
See Facebook / Instagram icons on the very bottom of
(currently inserted as icon with the http:// links)
March 29, 2017 at 10:31 pm #769125Hey baseenergy,
So you want the browser version on desktop, and then the app version on mobile? If this is the case you can create two sections. You then hide one on mobile, then the other on desktop.
Best regards,
Jordan ShannonMarch 30, 2017 at 7:19 pm #769574Hi Jordan,
thanks for the quick reply.
In the avia layout builder, for layout elements I can find Mobile -> Hide on mobile.
But there is nothing there that lets me hide the section on the desktop.Greetings
Simon
March 30, 2017 at 7:32 pm #769580Hi,
Give the mobile section a custom class and use that class to hide it on the desktop via css media queries.
Best regards,
Jordan Shannon- This reply was modified 7 years, 7 months ago by Jordan Shannon.
March 30, 2017 at 8:28 pm #769604OK I got it to work.
Color section 1 got section id “mobile-only”, the other color section got “desktop-only”.
Here the css that works@media only screen and (min-width: 768px) { /* Add your Desktop Styles here */ #desktop-only { display: block !important; } #mobile-only { display: none !important; } } @media only screen and (max-width: 768px) { /* Add your Mobile Styles here */ #desktop-only { display: none !important; } #mobile-only { display: block !important; } }
March 30, 2017 at 8:47 pm #769617Hi,
Yes, this is exactly what I meant. I am glad this was able to work for you.
Best regards,
Jordan ShannonMay 20, 2017 at 5:49 pm #797064After some time I found out that this solution is ok, but not perfect. E.G. when looking at the site on tablets, it will open the browser instead of the installed app.
There is a javascript solution, that tries to load the app and opens the browser if it fails to load the app:
http://stackoverflow.com/questions/13675535/how-to-launch-apps-facebook-twitter-etc-from-mobile-browser-but-fall-back-to-hBut how to add such a javascript function to the icons?
May 22, 2017 at 8:52 am #797461Hi,
To apply this custom JS code you`ll request a freelance through this link: http://kriesi.at/contact/customization
Best regards,
John Torvik -
AuthorPosts
- You must be logged in to reply to this topic.