CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Hamman Samuel
Hamman Samuel

Reputation: 2590

Links disabled in mobile version of website

I'm using Bootstrap as the template for this website, www.ifgedmonton.org Everything works fine on the desktop version, but in the mobile version, all links except the navigation don't work. I've run the code through the W3C Validator, and fixed the possible candidates causing this issue. I've also looked at other suggestions regarding this (here, here, here and here), but they don't work for me. To replicate, please open the website on a mobile device or make your browser window small enough for it to render the mobile version. The screenshot below shows which links I'm referring to.

Links not working examples

Upvotes: 0

Views: 313

Answers (5)

user4563161
user4563161

Reputation:

Your Sidebar is overlapping your content because of this

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:left; }

on your media queries for mobile use

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:none; }

and youll be able to select ur text and links again

Upvotes: 2

Raj Nandan Sharma
Raj Nandan Sharma

Reputation: 3862

First Solution

Change This

<div class="col-sm-3" id="sidebar" role="navigation"></div>

To This

<div class="col-xs-12 col-sm-3" id="sidebar" role="navigation"></div>

This Will put your sidebar at the bottom

Or

Change it to this

<div class="col-sm-3 hidden-xs" id="sidebar" role="navigation"></div>

This will hide your sidebar

Upvotes: 1

user2684452
user2684452

Reputation: 731

Your problem is this:

<script src="http://www.ifgedmonton.org/assets/libs/boostrap/js/bootstrap.min.js"></script>

not pulling the file

check all of your links too bootstrap css and js files.

Upvotes: 1

Jmh2013
Jmh2013

Reputation: 2777

You're sidebar div is sitting on top of you main content. You can fix this with the correct css, or add a clearing div between them.

<style>
    .clear { clear: both; }
</style>

<div class="clear"></div>

Upvotes: 0

OblongMedulla
OblongMedulla

Reputation: 1595

From the looks of it, it is not a mobile version. It is just getting squished. The right column when it drops below, breaks the links. I would look into getting a real mobile template. Here is a walkthrough: http://www.sitepoint.com/build-a-responsive-mobile-friendly-website-from-scratch-dive-into-the-code/

Upvotes: 0

Related Questions