I have a deployed website, working perfectly fine on local and server :
autrecote.be/en
except that the menu (including Description & Contact) doesn't work but only on smartphones.
As I used the Grav CMS, I didn't do the responsive adaptation and I have no idea where to begin to look. What could cause the links to work only on computer browsers ?
Thank you a lot for your help
EDIT :
Thanks to the answer below, I managed to find the error, these lines were in the file for the normal menu but not in the mobile menu :
Indeed, I found the error, this line was in the file for the normal menu but not in the mobile menu :
<li class='menu-item menu-item-type-post_type'><a href='{{base_url_absolute }}/{{ item.url|replace({"page:":''}) }}'>{{ item.text }}</a></li>
It is working now, thanks a lot.
It's not a matter of computer versus smartphone browsers. You'll see the same behavior if you make your desktop browser window small enough. (In Firefox you have a handy tool called "Responsive Design Mode" that you can use for this.)
In the page's source you'll see that there are two menus defined, one "normal" one and one "mobile" one (with the 'hamburger' icon with the 3 horizontal lines). It is this menu that seems to have the wrong links: the href values are things like page:description, instead of the actual page links.
Related
I have a website with the great Font-Awesome icons: http://www.lefrasi.it/.
If you see it from mobile, everything is ok, icons are displayed on every kind of devices.
But if I see my website on Samsung S6 and Galaxy Tab E from Facebook App (or Instagram App), icons are not displayed. On iPhone 6 they are visible. So it seems the problem is only on Android devices.
Try on Android mobile using Facebook app from https://www.facebook.com/lefrasiit-frasi-belle-aforismi-e-citazioni-1020903941368734/ and then click on my website link (for example).
It seems that FB or Instagram use iframe to show my website, and icons are "invisible", but if you click on them (for example on the main nav menu on the right there is a search icon), they work. So it seems icons are there, but are invisible.
Any ideas?
I find a possible solution.
The problem seems to be including external css of font-awesome from maxcdn.
I used: https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Including and loading it from my theme folder, seems to fix the problem.
I tried also to load externally using "//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" (without "https") and it works too.
So the problem could be loading external font-awesome css using https protocol.
//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
is the correct solution.
Please refer to https://stackoverflow.com/a/26616469/4769949
I have a website that I've just created that has a jquery-ui slider bar link removed
The slider bar doesn't seems to work properly on my phone which is an android - it could affect other mobile browsers too.
Is there a way of fixing this?
Thanks
I've just had a look on my phone and it also doesn't work. However, I have noticed in the past that other JavaScript items (on other sites) also don't work, so I don't think it's a specific problem with your site.
In terms of a workaround, you could check the viewer's user agent and display a different selection method if they're on a phone.
I built a very simple web page for online FAQ reference.
This is basically a plain html page with very few css.
When I open it form my PC brawser it looks just fine, also when I open it from different smartphones (in default brawser) it looks cool in all of them.
Now my problems rises when I try to open it inside my mobile app by calling an intent with ACTION_VIEW like this:
startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("https://my.domain.it:8443/FAQ/")));
In fact this leads to different behaviours depending on the device used to perform this action. Samsung S2 displays it right, but most of the other devices (i.e. Samsung Note, all Galaxys...) display the site much more zoomed than in ordinary brawser's view, also the zoom seems to be somehow 'fixed' as even zooming out the view won't turn it to the regular brawser correct view.
Is there something I can do for this? I've been googling this for a while but couldn't find a single helpful link.
EDIT
I validated the HTML and the CSS with an online validator and it gives "Valid" in both.
Thanks.
Check your site for HTML or CSS errors. Your issue got nothing in common with android really, but the way 3rd party application interpret your HTML/CSS
Sorry that I don't have a example code for you to see. My question is that I have 8 image buttons for my menu and I need to know how to make the image buttons show and not show.
Meaning When you go to the menu on Android it shows 7 buttons and hides the 1 button that's for iOS and when your on the iOS it shows all 8 image buttons. I have search on Google for two days now still lost.
I have one solution for menu buttons: Try this AwesomeMenu link.
You will have to make your own modification according to your requirement.
If you're writing a web app and you need to know if the app is being accessed on an Android device or an iOS device, you should look at the user agent string.
Here's a list of iOS devices and their user agent strings: http://www.enterpriseios.com/wiki/UserAgent (First hit on Google, can't speak for the accuracy).
Here's one for Android devices: http://www.gtrifonov.com/2011/04/15/google-android-user-agent-strings-2/ (again, no idea how accurate; do your own research to be sure).
You just have to look at navigator.userAgent in your JavaScript and figure out what device the user is using. That's a start, anyway. (You'll also want to look at the iOS web app documentation to see Apple's specific meta tags and stuff to make your web app work nicely on iOS, and I'm sure Android has something similar).
I am building a web site that needs to work on computers as well as tablets and I have found that if you have a web form with select tags in it, when you view it with a tablet running android 3.1 the select options are shown in a modal window at the bottom of the page.
when you select options using this method, it is no longer the select option changing in the DOM and you cannot react to changes. Is there a way to disable this so that a dropdown is a dropdown and looks and reacts as it would on a desktop?
Thanks in advance to anyone that can help. (Google has yet to yield any results for me)
Have you tried jQuery Mobile? It basically implements jQuery for mobile devices. I found that there's a way to build Select Menus right there.