CODEWITHSUNDEEP
htmlcsshyperlink
Allan
Allan

Reputation: 343

Links don't work on mobile mode

My following app has a list of winners. It all works great on the desktop, but as soon as I resize to the mobile size, The winners don't seem to be clickable anymore.

https://religious-freedom.herokuapp.com/

I think some part of the css is not working very well. I was my first big app, so all the codes are a little messy.

Can someone give me an insight on what is causing it? Thanks

Upvotes: 3

Views: 11584

Answers (2)

Chao LI
Chao LI

Reputation: 99

I know why now. Check your html, the link is not properly included in your picture. If you move the pointer, it only works when you click the anchor tag not the image. So change your code, make sure it works for img clicking.

<a href="http://religiousfreedomandbusiness.org/global-awards/don-larson.html" target="_top">
                    <img src="http://s3.amazonaws.com/assets.my-bucket/candidates/avatars/000/000/006/medium/Don-Larson.jpg?1470198723">
                    <img src="../images/silver.png" class="medalsilver">
</a>

Upvotes: 0

mrogers
mrogers

Reputation: 1217

Your link elements are being covered by other div elements. I added the clearfix class to the following div and it "uncovered" your links.

<div class="silver col-lg-4 col-md-4 clearfix"...

See http://getbootstrap.com/css/#helper-classes-clearfix for more about clearfix class. It is common to add

It is very helpful to use the browser devtools to examine your page. As you mouse over elements in the devtools window pane it will show where your divs are positioned and if they may be unintentionally overlapping with other content.

Upvotes: 4

Related Questions