bootstrap a-tag doesn`t work on tablet and smartphone

Question

I encountered a problem with the a-tag on a recent project: The Link works fine in the Desktop Version, as soon as I scale down the browser to md or sm the link doesnt work anymore. Now this is really strange because I ve never changed anything.

  <div class="col-sm-4 pull-right"> <h2>Lorem Ipsum:</h2> <p>Dolor Sit amet</p> <a href="#works"> <i class="fa fa-toggle-right"></i> LINK</a> <br></div> 

Regarding the link: Doesn`t matter wether I link to an ID, file or external link, always the same...

Does anyone know how, or where I could have made a mistake? As the classes only link to the main bootstrap file I really cant find whats wrong. Regarding possible javaScripts or JQuery scripts which could interfer: I checked and the error only occurs on some pages, other links work fine, eventhough the same scripts are running...

Answer 1

Please use this in CSS. Actually this issue raised by overlapping div named as '.col-sm-8'. Use below code only for mobile view-port.

.col-sm-8 {clear:both;}

Answer 2

ok, whenever you use Bootstrap framework, remember that, while defining columns, you also need to define columns for lowest viewport, otherwise, float issue arises, and you don't get height of its child elements. This is how the CSS for bootstrap has been written.

So for best practice:

<div class="col-xs-12 col-sm-4">
 your content.
</div>