I am trying to use Xswitch Plugin for my website. But i have a problem with the mobile screen. When i check the developer console mobile screen the inputs or text are not clickable or can not selectible.
Normal desktop screen not have any problem. But when you open developer console to test responsive screen or any other screen, for example you can not select the text. I have also test to add input box but could not be clickable. Where is the problem here, any one can help me please ?
Here is DEMO for checking mobile screen.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#container, .sections, .section {
position: relative;
height: 100%;
}
.section {
background-color: #000;
background-size: cover;
background-position: 50% 50%;
}
#section0 { background-image: url(https://unsplash.it/1980/1280?image=1076); }
#section1 { background-image: url(https://unsplash.it/1980/1280?image=1075); }
#section2 { background-image: url(https://unsplash.it/1980/1280?image=1074); }
#section3 { background-image: url(https://unsplash.it/1980/1280?image=1073); }
.pages {
position: fixed;
right: 10px;
top: 50%;
list-style: none;
}
.pages li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
margin: 15px 0 0 7px;
}
.pages li.active {
margin-left: 0;
width: 14px;
height: 14px;
border: 4px solid #FFFFFF;
background: none;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>