Question
I am designing a website in bootstrap and would like to have my pop-ups work on mobile, the self-defense section won't trigger on mobile and it is quite upsetting!
I looked over the code and nothing seems wrong as the home-defense works just fine.
https://stackoverflow.com/questions/23456876
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2nd Amendment Guns</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="/nick/guns/dev/favicon.ico" rel="icon">
<meta content="initial-scale=1, maximum-scale=1" name="viewport">
<style>
@media (max-width: 767px){
.alignme{
text-align: center!important;
}
}
.tab-pane ul {
list-style-type: none;
}
}
.navbar-collapse {
max-height: none;
}
@media (max-width: 954px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
}
@media (min-width: 600px) {
.onlydesktopmargin {
margin-top: 75px;
}
.branding {
float: right;
}
}
@media (min-width: 1200px) {
.onlydesktopmargin {
margin-top: 75px;
}
}
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-nav>li {
padding-left: 5px;
padding-right: 5px;
}
}
@media (min-width: 1000px) {
.navbar-nav>li {
padding-left: 10px;
padding-right: 10px;
}
}
@media (min-width: 1100px) {
.navbar-nav>li {
padding-left: 20px;
padding-right: 25px;
}
}
@media (min-width: 1240px) {
.navbar-nav>li {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 954px) {
.branding {
margin-left: auto;
margin-right: auto;
float: none;
}
}
/* Flexible iFrame */
.Flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.contact a {
font-size: 23px;
}
.center {
text-align: center;
}
.img-responsive {
margin-left: auto;
margin-right: auto;
}
a.thumbnail: hover, a.thumbnail: focus, a.thumbnail.active {
border-color: red;
}
.tab-content {
padding-top: 10px;
}
.footer p,
a {
font-size: 10px;
}
@media (min-width: 1200px) {
.desktoppadding {
padding-top: 55px;
}
}
.modal {
color: black;
}
.thumbnail {
background-color: transparent;
padding-top: 5px;
}
.navbar-toggle .icon-bar {
background-color: white;
}
.center {
text-align: center;
}
@media only screen and (min-width: 768px) {
.navbar-nav>li>a {
padding: 15px;
font-size: 13px;
}
.navbar-nav {
margin-top: 30px;
}
}
@media only screen and (min-width: 884px) {
.navbar-nav>li>a {
padding: 19px;
font-size: 17px;
}
}
.navbar {
border-bottom: hidden;
}
body {
font-size: 17px;
background-color: black;
color: white;
letter-spacing: 1.5px;
line-height: 1.5;
text-align: center!important;
}
.center {
text-align: center;
}
.navbar-brand {
font-size: 40px;
}
.navbar-dn {
background-color: black;
}
.active>a: focus {
background-color: #ecf0f1;
color: white;
}
.navbar-dn .navbar-nav>.active>a {
color: black;
background-color: #c0392b;
border-radius: 15px;
}
.nav>li>a: hover, .nav>li>a: focus {
background-color: white;
color: black;
}
a {
color: #cccccc;
font-size: 11px;
}
a: hover, a: focus {
color: white;
text-decoration: none;
}
hr {
border-top: 1px solid #c0392b;
}
.rotate {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.rotate: hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body data-offset="190" data-spy="scroll" data-target="#myNavbar">
<nav class="navbar navbar-dn navbar-fixed-top" id="myNavbar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" style="margin-top: 30px;" type="button"><span class="sr-only">Toggle
navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand rotate">
<img height="80px;" src="assets/images/guns.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse" style="border-bottom:1px solid #c0392b;">
<ul class="nav navbar-nav">
<li class="active"><a href="#section-1">Defense</a>
</li>
<li><a href="#section-2">Competition</a>
</li>
<li><a href="#section-3">Class 3</a>
</li>
<li><a href="#section-4">About / Contact</a>
</li>
</ul>
<a href="http://delandgoldsmith.com/" class="navbar-brand rotate branding">
<img height="80px;" src="assets/images/goldlogo.png">
</a>
</div>
</nav>
<div class="container" id="section-1" style="padding-top:100px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="center">Home-Defense</h2>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 onlydesktopmargin">
<p>
The biggest question for first time firearm purchasers are…. Hand gun or Long gun? Pistol or Revolver? Shotgun or Rifle? Any gun is better than no gun when faced with an intruder, but some are better choices than others when it come to home-defense.
</p>
</div>
<!-- Button trigger modal -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-3" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/162410_01_md.jpg">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-4" data-toggle="modal">
<img src="http://utas-usa.com/cache/product_13EA654CCB1E43CEA3D3C852E146B6C5_330x330.JPG">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-5" data-toggle="modal">
<img src="https://www.keltecweapons.com/media/article/image/cache/414-355-productionKSG_right_4052hires.png">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-home-1" data-toggle="modal">
<img class="img-responsive" src="http://www.taurususa.com/images/imagesMain/4510PLY-SS2_01.jpg">
</a>
</div>
<div class="col-xs-6 col-md-4 col-lg-8">
<a class="thumbnail" data-target="#Modal-home-2" data-toggle="modal">
<img src="https://s3.amazonaws.com/savagefiles/firearms/models/900/ysZ0b0yu6_nYi3JEpBa.png">
</a>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h3>
Pistols and Revolvers
</h3>
<p>
Most pistols are semi-automatic and are easier to shoot than revolvers, although they are much more complicated to operate. Revolvers, especially the Taurus Judge or the Smith & Wesson Governor, are very viable for home-defense weapons because they can
use either .410 shotgun shells or .45 Long Colt ammo.
</p>
<h3>
Shotguns and Rifles
</h3>
<p>
The shotgun is considered to be the ultimate home-defense weapon. While very effective there are some drawbacks to using a shotgun in your home. A shotgun is designed to be operated with two hands for accuracy. This makes is more difficult to move about
the house with ease. The “scatter of the pellets” could also be a major concern. Rifles, AR-15 and others, are very popular right now, but cost considerably more and still have issues with size and ammo availability.
</p>
<p>
All in all, no matter which gun you choose, become familiar with it. If you shoot it regularly, a firearm can save the lives of you and your family.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h2 class="center">Self-Defense</h2>
<!-- Button trigger modal -->
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-7" data-toggle="modal">
<img src="http://www.coltsmfg.com/Portals/0/productimages/2013/O1980RG.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-2" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/109381_01_md.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-3" data-toggle="modal">
<img src="http://www.magnumresearch.com/GetDynamicImage.aspx?path=SVimgR-DE1911U.jpg&h=326&w=278" class="img-responsive">
</a>
</div>
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-4" data-toggle="modal">
<img src="http://ruger.com/products/lcr/images/5413.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-5" data-toggle="modal">
<img src="http://www.ruger.com/products/lcp/images/3713.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-8" data-toggle="modal">
<img src="http://www.bersa.com/skin/frontend/blank/theme063/images/guns/Thunder-380-XmatN-L-prev.jpg" class="img-responsive">
</a>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-1" data-toggle="modal">
<img src="../assets/images/glock42.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-6" data-toggle="modal">
<img src="http://www.sigsauer.com/upFiles/catalog/product/P320-FS-Nitrondetail-L.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-self-9" data-toggle="modal">
<img src="http://nebula.wsimg.com/41873d0f5a8195cd431efeb5abe4900a?AccessKeyId=77500781996CFD82E891&disposition=0&alloworigin=1" class="img-responsive">
</a>
</div>
</div>
</div>
<div class="col-lg-6">
<p>
Hand guns come in two basic types- Pistols and Revolvers. Revolvers, like the Smith & Wesson Airweight or the Ruger LCR, have a visible rotating cylinder that holds 5 or 6 rounds of ammunition. Pistols are almost always semi-automatic. These include the
Bersa Thunder .380 and any of the Glocks. Pistols hold the ammunition in an internal magazine and generally hold more rounds than a revolver.
</p>
<p>
How you carry your self-defense weapon is more important than which gun you choose. If you can not access your gun quickly and easily, you might as well not have a gun at all. Holsters, either inside or outside the pants on the waist, seem to be the best
option since they are quick and have easy access. Other options include carrying in your pocket, purse or fanny pack. A firearm should always be holstered not matter which way you decide to carry.
</p>
</div>
</div>
</div>
</div>
<!--DEFENSE Ends here-->
<!--Competition Starts-->
<div class="container" id="section-2">
<hr>
<h2 class="center">
Competition
</h2>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
There are many factors to consider while choosing the right firearm for competition shooting. Factors such as what type of competitions and which division you plan to compete in, action type, and holster availability. We cater to all IDPA, USPSA, ICORE
and Steel Challenge competition shooters. Our inventory ranges from basic Glocks to race guns that are custom made to your shooting ability and level.
</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-1" data-toggle="modal">
<img src="../assets/images/glockrace.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-4" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/178031_01_md.jpg" height="150" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-3" data-toggle="modal">
<img src="http://www.smith-wesson.com/wcsstore/SmWesson2/upload/images/firearms/detail_md/178058_01_md.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<a class="thumbnail" data-target="#Modal-competition-2" data-toggle="modal">
<img src="../assets/images/glock35.jpg" class="img-responsive">
</a>
</div>
<div class="col-xs-8 col-md-4 col-lg-8">
<a class="thumbnail" data-target="#Modal-competition-5" data-toggle="modal">
<img src="../assets/images/competition5.jpg" class="img-responsive">
</a>
</div>
</div>
</div>
<!--Competition Ends-->
<!---class3 starts-->
<div class="container" id="section-3">
<hr>
<h2 class="center">Class 3</h2>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.gem-tech.com/store/pc/catalog/photobar_mm9_2012_899_general.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.sigsauer.com/upFiles/catalog/product/516-pdw-Detail-Hero.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="http://www.johnsguns.us/images/glock.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class4.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class5.jpg" class="img-responsive">
</div>
</div>
<div class="col-xs-4 col-md-4 col-lg-4">
<div class="thumbnail">
<img src="../assets/images/class6.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
Class 3 weapons, also known as NFA weapons, are machine guns, short barrel shotguns, short barrel rifles, and sound suppressors.
</p>
<p>
A machine gun is any gun that can fire more than one shot with a single pull of the trigger. Short barrel shotguns are any shotgun with a barrel length of less than 18” or an overall length of 26”. Short barrel rifles, similar to short barrel shotguns,
have a barrel length is less than 16”, while the overall length is also 26”.
</p>
<p>
A sound suppressor or silencer is any device for muffling the sound of the gunshot. We carry brands such as Silencer Co. and Gemtec. We also sell rifles that the entire barrel is suppressed.
</p>
</div>
</div>
</div>
<!---class3 ends-->
<!--about start-->
<div class="container">
<hr>
<div class="row">
<div class="col-lg-12">
<h2 class="center">About / Contact</h2>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="section-4">asdf
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
asdf
</div>
<div class="col-lg-12" style="text-align:center;">
<h3>
Concealed Carry Class
</h3>
<p>
All classes are taught by Sean Beery (owner Volusia County Gun & Hunt Club).
</p>
<p>
All necessary paper work provided.
</p>
<p>
Instructor makes sure all paperwork is filled out CORRECTLY!
</p>
<p>
(if it’s not filled out correctly it will be kicked back and delay your permit)
</p>
<p>
Police Officer will be here doing fingerprinting
</p>
<p>
Passport Picture will be taken and processed during class
</p>
<p>
Classroom session is roughly 4 hours
</p>
<p>
asdf
</p>
<p>
If you don’t have a firearm, we can provide one for you. The ammo will be an additional charge, you will need about 50 rounds.
</p>
<p>
You will have full access to the range once class is done.
</p>
</div>
</div>
</div>
<div class="container">
<div class="col-lg-12 col-xs-12 contact" style="text-align:center;">
<hr>
<h2>
<a href="tel:3867366466"><i class="fa fa-phone"></i>
(386)736-6466 </a>
</h2>
<hr>
</div>
<div class="col-lg-2 col-md-2">
</div>
<div class="col-lg-8 col-md-8 col-xs-12">
<!-- Responsive iFrame -->
<div class="col-lg-2 col-md-2">
</div>
</div>
<div class="footer">
<div class="col-lg-4 col-md-3 col-sm-3 col-xs-12">
<p>Deland Goldsmith & Firearms
</p>
</div>
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-12">
<p style="text-align:center;">
map
</p>
</div>
<div class="col-lg-4 col-md-6 col-sm-7 col-xs-12 alignme" style="text-align:right;">
<p>Designed by <a href="https://plus.google.com/+RobertKhayat">Robert Khayat</a> @ <a href="http://dnwebdev.com/">Day & Night Web Solutions, LLC</a>
</p>
</div>
</div>
<!---transfers ends=-->
<!---modals--->
<div class="modal fade" id="Modal-self-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="myModalLabel">Glock 42</h4>
</div>
<div class="modal-body">
<img alt="image" class="img-responsive" src="../assets/images/glock42.jpg">
<div class="tabs">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#description6">Description</a>
</li>
<li class=""><a data-toggle="tab" href="#techspecs6">Tech Specs</a>
</li>
</ul>
<div class="tab-content" id="myTabContent6">
<div class="tab-pane fade active in" id="description6">
<p>The new GLOCK 42, in .380 AUTO, is a slimline subcompact pistol engineered with the GLOCK Perfection promise and able to withstand the rigors of routine training. Made in the USA, the G42 is the smallest pistol GLOCK has ever introduced, making
it ideal for pocket carry and shooters with smaller hands. Years of requests across market groups for a super-concealable, reliable single-stack .380 GLOCK pistol prompted extensive research and development to bring the GLOCK customer the G42.
</p>
</div>
<div class="tab-pane fade" id="techspecs6">
<ul>
<li>.380 AUTO / Safe Actio</li>
<li>Dimensions</li>
<li>LENGTH:151 mm / 5.94 in.</li>
<li>WIDTH:24 mm / 0.94 in.</li>
<li>LENGTH BETWEEN SIGHTS: 153 mm / 6.02 in.</li>
<li>HEIGHT:105 mm / 4.13 in.</li>
<li>BARREL LENGTH:82.5 mm / 3.25 in.</li>
<li>UNLOADED:390 g / 13.76 oz.</li>
<li>LOADED:~407 g / ~14.36 oz.</li>
<li>TRIGGER PULL:~25 N / ~5.5 lbs.</li>
<li>TRIGGER TRAVEL:~12.5 mm / 0.49 in.</li>
<li>Barrel Rifling / Length of Twist</li>
<li>BARREL RIFLING:right hand, hexagonal</li>
<li>LENGTH OF TWIST:250 mm / 9.84 in.</li>
<li>Magazine Capacity</li>
<li>STANDARD: 6</li>
</ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
</div>
</div>
</div>
</div>
<!---modal end--->
</div>
<script>
function close_toggle() {
if ($(window).width() <= 954) {
$('.nav a').on('click', function() {
$(".navbar-toggle").click();
});
} else {
$('.nav a').off('click');
}
}
close_toggle();
$(window).resize(close_toggle);
//function that offsets scoll
if ($(window).width() <= 768) {
var offset = 160;
} else {
var offset = 170;
}
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
</script>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
Solution
All you need to do is, add a few classes that you have missed:
<div class="col-lg-6">
<p>
Hand guns come in two basic types
to:
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p>
Hand guns come in two basic types
Since you hadn't specified the classes, on the medium and smaller viewport, both the col-lg-6 are clubbed together and that's causing the modals to not open up.
