Button doesn't work in mobile version

Question

This is my simple html code:

<p><a href="http://codepen.io/jundymek/" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>

It works fine on my desktop(I click button and it redirect to link). When I run it on mobile version, button isn't clickable. Why? How can I solve this issue?

The whole code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Jundymek - portfolio</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/mystyle.css" rel="stylesheet">
        <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'  type='text/css'>
        <link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script type="text/javascript" src="js/myjs.js"></script>
    </head>
    <body>
        <div class="container-fluid top fill" id="top">
            <nav class="navbar navbar-inverse navbar-fixed-top sticky">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#" style="color:#FF9422">jundymek</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                        <ul class="nav navbar-nav">
                            <li id='1' class="active"><a href="#top">Home</a></li>
                            <li id='2' ><a href="#middle">Portfolio</a></li>
                            <li id='3' ><a href="#contact">Contact</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-2x color" aria-hidden="true"></i></a></li>
                            <li><a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-2x color" aria-hidden="true"></i></a></li>
                            <li><a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-2x color" aria-hidden="true"></i></a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div class="vertical-center">
                <img class="img-responsive center-block" src="images/html_icons.png"  id="icons" alt=""
                width="140px">
                <h1 class="text-center" style="margin: 10px 0 0 0">jundymek</h1>
                <div class="terminal text-center" style="color: #00fd55;font-size:30px; font-family: 'Courier'"></div>
                <h3 class="text-center">Sample portfolio page for <a href="https://www.freecodecamp.com">FreeCodeCamp.com</a> course</h3>
            </div>
        </div>
        <div class="container-fluid middle fill" id="middle">
            <h1 class="text-center">Portfolio - my sample
            projects</h1>
            <div class="row">
                <div class="col-xs-6 col-sm-3">
                    <div class="thumbnail">
                        <figure class="snip1091 navy"><img src="http://ballislife.com/wp-content/uploads/2012/12/Jordan.jpg" alt="jordan"/>
                            <figcaption>
                            <h2>MJ  <span>Tribute Page</span></h2>
                            </figcaption><a href="http://codepen.io/jundymek/full/JEwbzN/"
                            target="_blank"></a>
                        </figure>
                        <div class="caption">
                            <h3>MJ Tribute Page</h3>
                            <p class="captions">Page about the best NBA player in history.</p>
                            <p><a href="http://codepen.io/jundymek/full/JEwbzN/"
                            target="blank" class="btn btn-primary btn-responsive"
                            role="button">Check this site</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <div class="thumbnail">
                        <figure class="snip1091 navy"><img src="images/wawa_busy.png" alt="wawabusy"/>
                            <figcaption>
                            <h2>Wawabusy  <span>.pl</span></h2>
                            </figcaption><a href="http://www.wawabusy.pl" target="_blank"></a>
                        </figure>
                        <div class="caption">
                            <h3>Wawabusy.pl</h3>
                            <p class="captions">One of my websites. Do you want to rent a minibus in Poland?;)</p>
                            <p><a href="http://www.wawabusy.pl" target="_blank" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <div class="thumbnail">
                        <figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/>
                            <figcaption>
                            <h2>Future  <span>project</span></h2>
                            </figcaption><a href="#"></a>
                        </figure>
                        <div class="caption">
                            <h3>Future project</h3>
                            <p class="captions">There will be link to my next project.</p>
                            <p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6 col-sm-3">
                    <div class="thumbnail">
                        <figure class="snip1091 navy"><img src="https://placehold.it/435x240?text=placeholder" alt="placeholder"/>
                            <figcaption>
                            <h2>Future  <span>project</span></h2>
                            </figcaption><a href="#"></a>
                        </figure>
                        <div class="caption">
                            <h3>Future project</h3>
                            <p class="captions">There will be link to my next project.</p>
                            <p><a href="#" class="btn btn-primary btn-responsive" role="button">Check this site</a></p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12">
                    <h3 class="text-center">My skills: </h3>
                    <div class="row text-center" style="margin-top:30px">
                        <div class="image-skills">
                            <img class="img-responsive" src="images/django.png"
                            width="140px"alt="django">
                        </div>
                        <div class="image-skills">
                            <img class="img-responsive" src="images/python.png"
                            width="140px" alt="python">
                        </div>
                        <div class="image-skills">
                            <img class="img-responsive" src="images/git.png"
                            width="140px" alt="git">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container-fluid top contact" id="contact">
            <h1 class="text-center">Contact</h1>
            <div class="row">
                <div class="col-sm-6">
                    <form>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="name">Your name</label>
                                    <input type="text" class="form-control" id="name" placeholder="Enter your name">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-label" for="name">Email</label>
                                    <input type="email" class="form-control" id="email" placeholder="Enter your email adress" style="color:white">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label class="form-label"
                                    for="message">Message</label>
                                    <textarea class="form-control" placeholder="Leave a message..." rows="5"></textarea>
                                </div>
                            </div>
                        </div>
                        <input type="submit" class="btn btn-success btn-responsive" value="Send message">
                    </form>
                </div>
                <div class="col-sm-6">
                    <h3 class="text-center">Connect with me</h3>
                    <div class="text-center">
                        <a href="https://www.freecodecamp.com/jundymek" title="freecodecamp.com"><i class="fa fa-free-code-camp fa-4x color" aria-hidden="true"></i></a>
                        <a href="https://github.com/jundymek" title="github.com"><i class="fa fa-github fa-4x color" aria-hidden="true"></i></a>
                        <a href="http://codepen.io/jundymek/" title="codepen.io"><i class="fa fa-codepen fa-4x color" aria-hidden="true"></i></a>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <script src="js/typewriting.js"></script>
    </body>
</html>

There is another strange problem in my site. When I reduce windows size, part of my thumbnail image is not clickable. Only top part of image is treated as link. I don't know why. Any idea?

Post all of the relevant code – Carol Skelly Feb 19 '17 at 14:41 — Carol Skelly, Feb 19 '17 at 14:41

score 1 · Answer 1 · answered Feb 19 '17 at 15:09

1

that's really strange, but what I suppose you could do is create an actual button that would open the link rather than a link.

<input type="button" value="Check this site" onclick="window.open('http://www.google.pl', '_blank');" />

I hope this works for you.

answered Feb 19 '17 at 15:09

Rishi

341
1
7

Doesn't work. Button is not clickable in mobile view. – jundymek Feb 19 '17 at 17:00
How are you testing the mobile view, because it worked for me? – Rishi Feb 20 '17 at 10:07
I moved "my skills" area to another row. Now it works fine. – jundymek Feb 20 '17 at 11:01
Great! Good to hear – Rishi Feb 20 '17 at 11:04

score 0 · Answer 2 · edited May 23 '17 at 12:32

0

Based on Rishi answer, I did a little search. And it shows that you should use touchstart event.

More info on the MDN docs.

edited May 23 '17 at 12:32

Community

1
1

answered Feb 19 '17 at 18:12

RompePC

815
1
8
17

score 0 · Answer 3 · answered Feb 19 '17 at 18:27

Try using below code. I have added chklink class for your button and in script I am calling its event triggered function

     <div class="caption">
                                <h3>MJ Tribute Page</h3>
                                <p class="captions">Page about the best NBA player in history.</p>
                                <p><a href="#"
                                target="blank" class="btn btn-primary btn-responsive chklink"
                                role="button">Check this site</a></p>
                            </div>

<script>
    $(document).on("click touchStart",".chklink",function(){
    window.open('http://codepen.io/jundymek/full/JEwbzN/', '_blank');
    });
</script>

It works only in normal window. When I resize it to phone size (below 760 px) button doesn't respond. — jundymek, Feb 19 '17 at 18:55
It is bootstrap issue. When I deleted my bootstrap.css file I can resize window and everything works (except styling of course). — jundymek, Feb 19 '17 at 19:32

score 0 · Answer 4 · answered Feb 20 '17 at 00:18

I moved

             <div class="col-sm-12">
                <h3 class="text-center">My skills: </h3>
                <div class="row text-center" style="margin-top:30px">
                    <div class="image-skills">
                        <img class="img-responsive" src="images/django.png"
                        width="140px"alt="django">
                    </div>
                    <div class="image-skills">
                        <img class="img-responsive" src="images/python.png"
                        width="140px" alt="python">
                    </div>
                    <div class="image-skills">
                        <img class="img-responsive" src="images/git.png"
                        width="140px" alt="git">
                    </div>
                </div>
            </div>

to another row. Everything is as it should be now.

score 0 · Answer 5 · answered Apr 09 '17 at 19:27

0

This has been answered multiple times. For a quick answer:

You can use 'touchstart' with jquery.

$('#button1').on('touchstart click', function(){ /* code here */ });

answered Apr 09 '17 at 19:27

karmafunk

1,453
12
20

Button doesn't work in mobile version

5 Answers5