I'm looking for help as I'm stuck with links not working on mobile device (Safari, iPhone at least).
I'm using code from codrops, it's an elastic dragging animation. I'm looking to add links inside each cards ( <a> inside each li element).
It seems to work on a computer, but not on a mobile device. The link is shown, you can tap it (click) but it doesn't send you to the destination, it's like it's not working.
I guess it's from the CSS animation or maybe modernizr but I'm really not an expert and I need your help !
Here is a link to the original pen with a link on the first image : https://codepen.io/imromain/pen/gwdRzo
Thank you !
Romain
I recommend you to open an issue on the original project on github
Then, the creator might help you better.
Related
I'm trying to discover why some links aren't clickable in chrome only and on desktop view. The links are clickable in safari and firefox, so not sure what's causing this. Also on mobile view, the links work although I cannot see any relevant changes to cause this.
The site is https://www.bhrhospitals.nhs.uk/ and I'm referring to the 'latest news' section. Both .blog-post-title and .full-story-link should be clickable.
Also I rarely create posts that link to code on external websites, so when doing this is it ok to post just the link and relevant HTML? The code can be found by just inspecting the site.
Thanks for any help here.
From the class name of your slider container, I assume that you're using the bxSlider. You need to disable the touchEnabled option.
$('.blog-posts-list').bxSlider({
touchEnabled: false
});
Youtube, Amazon, and a few other sites have a full bookmark image showing for their website. Mine is only showing my .ico. How do I code in a custom image for my blog? Is there meta tag for it? Thanks.
Edit:
Here is a screenshot of http://iconhandbook.co.uk/ in "Top Sites" in Firefox mobile:
Here is the same websites icon file:
http://iconhandbook.co.uk/favicon.ico
Take the time to look at their source code for their other icons.
So again my question: How do I get the same result as this website?
You can use the following extension to customize the image shown for pinned tiles, among other things.
https://addons.mozilla.org/firefox/addon/new-tab-tools/
I've just researched your question and there's result:
No, you can't add your custom bookmark icon. It's only available for big companies now.
There's no meta-tag for it. But you can try to do these things:
Change og:image of your blog. Possible it can help you with Chrome as described here
Add more apple-icon resolutions and android | wp icons
Fill your favicon by bg-color. I've tested some sites on Firefox iOS and found that's one, who has single-tone background and looks like you want.
I hope it helps you
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
Here is the website I want to replicate: http://www.voncarcha.com/contact
Here is my website: http://foxweb.marist.edu/users/kf79g/contact.php
I mainly want to replicate his about page and contact page across all screen sizes that are large medium and small. How can I do this with only css like I did with all of my other pages besides the about page and contact page?
All of my code is located in the page source under these files (after right clicking view source on your browser):
screen_styles.css
screen_layout_large.css
screen_layout_small.css
screen_layout_medium.css
contact.php
about.php
I tried absolutely everything I could think of. I tried to replicate his website, but mine simply does not work as smoothly. Mine especially looks terrible on older browsers IE 7-9 and Firefox, while his does not for some reason. I want my site to be optimized to work across all browsers. I do not know what to do anymore. After this is done, my website will finally be finished. Please help me out I need to get this project done as soon as possible. I would really appreciate any assistance.
Media Queries (currently what you're doing with responsive design) are the part of HTML5 and CSS3. So If you try these features in browsers that do not support HTML5, they will not work.
This link says, It can handle media queries in older browsers. You should take a look at it.
You can also take a look at This one
Mine is something of a newbie question which I'm hoping someone can shed some light on.
I have a table of contents on my page, with titles which link to sections further down the page.
the targets are created like this;
<a name='appendix'>Appendix</a>
and the links are created like this;
<a href='#appendix'>Jump to Appendix</a>
Now when you tap on the link in iphone safari, it takes you straight there no problem. However if you scroll back to the top, to the ToC, and tap the same link again, the browser does nothing.
Looking at the url I can see #appendix on the end and I assume that tapping the link again, the iphone believes its already at that link, since the url already has #whatever on the end.
Normally I'd be happy to leave it that, but the iPad, Android and Blackberry all behave as I'd expect, ie no matter where you are on the page or whether you'd tapped on the same link previously, they jump to the target section.
One thing I'm thinking about trying is embedding the whole page in a frameset so its url never changes, although being a noob I've no idea whether that'll even work.
Has anyone come across this before? Any ideas?
Thanks
This appears to be an issue with iOS not you. If it has been working on all other devices I am afraid there is nothing you can do except report it to Apple. However, has your iPhone been acting crashy lately, and have you tried it on other iPhones?