I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS:
body
{
min-width:980px;
background-color: #fff;
Despite trying several other solutions found online, the problem persists.
I'm currently incorporating idangero swiper for the first time, and while it displays correctly on iPhones, the issue lies with the div itself.
Here is the relevant CSS:
#welcome{
width: 100%;
height: 256px;
background-color: #1e2f3f;
}
Below is the code snippet for the swiper:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="idangerous.swiper.css">
<script src="idangerous.swiper.js"></script>
<script type="text/javascript">
window.onload = function() {
var mySwiper = new Swiper('.swiper-container',{
mode:'horizontal',
loop: true
});
}
</script>
<style>
.device {
width: 980px;
height: 528px;
padding: 30px 40px;
border-radius: 20px;
background: #111;
border: 3px solid white;
margin: 5px auto;
position: relative;
box-shadow: 0px 0px 5px #000;
margin: 0 auto;
}
.device .arrow-left {
background: url(images/arrows.png); no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
.device .arrow-right {
background: url(images/arrows.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -15px;
width: 17px;
height: 30px;
}
</style>
</head>
<body>
<div class="device">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/slide1.png"/>
</div>
<!--Second Slide-->
<div class="swiper-slide">
<img src="images/slide2.jpg"/>
</div>
<!--Third Slide-->
<div class="swiper-slide">
<a href="http://www.lbbacchus.com"><img src="images/slide4.jpg" alt=""/></a>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
Appreciate your help! :)