how can this be responsive - html

I tried 100% width but had no luck as it does not comply. anyone pls guide me. the swiper sometimes comes over the text it doesn't stay in the column. in mobile or tablet, I want them to be filling the screen with swiper slides and rest when you scroll down.in mobile view everything gets cut once i reach 528px any help
in mobile i want it to look like shown in imagepreview
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
ul.breadcrumb {
list-style: none;
display: flex;
flex-wrap: wrap;
width: 568px;
padding-left: 0;
}
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
.product{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.page-container {
display: grid;
grid-template-columns: auto 622px;
grid-column-gap: 21px;
grid-row-gap: 10px;
}
.swiper-container {
width: 538px;
height: 725px;
}
.swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 78%;
width: 100%;
}
.gallery-thumbs {
margin-top: 6px;
height: 18%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.box2 {
background-color: yellow;
min-width: 200px;
}
.product-title{
font-size: 28px;
}
.box3 {
background-color: blue;
grid-row: 2;
grid-column: 1 / span 3;
min-height: 200px;
}
#media only screen and (max-width: 800px) {
.page-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
}
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css"/>
</head>
<body>
<div class="product">
<div class="page-container"> <!-- Container -->
<div class="swiper-container">
<!-- Column 1 (Swiper) -->
<!-- Swiper -->
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
</div>
</div>
</div>
<!-- Column 2 (Details) -->
<div class="box2">
<ul class="breadcrumb">
<li>Home</li>
<li>Desert Safari</li>
<li>Morning Safari</li>
</ul>
<h1 class="product-title">Morning Safari</h1>
</div>
<!-- Content that spans two rows -->
<div class="box3">
Content that spans two rows
</div>
</div>
</div>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</body>
</html>


So typically my approach, when I am faced with something like this, would be to add media queries and make sure that the page-container div is not a grid display in those queries. For example, what I would do is give it flex at a certain width and change the flex-direction from row to column, and align the items in the center. Using this flex-direction: column; is great for mobile devices.
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs
}
});
ul.breadcrumb {
list-style: none;
display: flex;
flex-wrap: wrap;
width: 568px;
padding-left: 0;
}
ul.breadcrumb li {
display: inline;
font-size: 18px;
}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
ul.breadcrumb li a {
color: #0275d8;
text-decoration: none;
}
ul.breadcrumb li a:hover {
color: #01447e;
text-decoration: underline;
}
.product{
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.page-container {
display: grid;
grid-template-columns: auto 622px;
grid-column-gap: 21px;
grid-row-gap: 10px;
}
.swiper-container {
width: 538px;
height: 725px;
}
.swiper {
width: 100%;
height: 300px;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
background-size: cover;
background-position: center;
}
.gallery-top {
height: 78%;
width: 100%;
}
.gallery-thumbs {
margin-top: 6px;
height: 18%;
box-sizing: border-box;
padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.box2 {
background-color: yellow;
min-width: 200px;
}
.product-title{
font-size: 28px;
}
.box3 {
background-color: blue;
grid-row: 2;
grid-column: 1 / span 3;
min-height: 200px;
}
#media only screen and (max-width: 800px) {
.page-container {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
}
#media only screen and (max-width: 550px) {
.swiper-container {
width: 450px;
height: 725px;
}
}
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
<link href="https://unpkg.com/swiper#7/swiper-bundle.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css"/>
</head>
<body>
<div class="product">
<div class="page-container"> <!-- Container -->
<div class="swiper-container">
<!-- Column 1 (Swiper) -->
<!-- Swiper -->
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
</div>
<!-- Add Arrows -->
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
<div class="swiper-slide" style="background-image:url(https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg)"></div>
</div>
</div>
</div>
<!-- Column 2 (Details) -->
<div class="box2">
<ul class="breadcrumb">
<li>Home</li>
<li>Desert Safari</li>
<li>Morning Safari</li>
</ul>
<h1 class="product-title">Morning Safari</h1>
</div>
<!-- Content that spans two rows -->
<div class="box3">
Content that spans two rows
</div>
</div>
</div>
<script src="https://unpkg.com/swiper#7/swiper-bundle.min.js"></script>
</body>
</html>

Related

how to place a play button in the middle of all the images

index.html - below is the index.html file code where I have written all the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="./img-1.jpg" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-2.jpg" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-3.jpg" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>
style.css - below is the style.css file code here I have written all my CSS code
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 1rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
I want to place the play icon in the center of all the three images with CSS but I am getting the play icon only for the center image. How to get the play icon in the center of all three images.
I want to place the play font-awesome icon in the center of the image

Try this.
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 4rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
position:absolute;
text-align:center;
color:red;
bottom:30px;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
justify-content:center;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
display:flex;
justify-content:center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play" style="position:relative"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-1"></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-2"></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-3"></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>

You can use the flexbox property for your .centered and .img-container classes. Something as shown below:
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
Full Working Snippet: - (I've used random gifs as images just for this answer, you can replace them your images path)
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color: #000;
color: #fff;
padding: 1rem 4rem;
}
nav {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #fff;
margin: 0;
padding: 0;
}
.stream {
max-width: 1000px;
width: 100%;
}
.fa-play {
font-size: 3rem;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0;
}
li h1 {
font-size: 3rem;
}
a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
background-color: white;
}
.row {
display: flex;
}
.col {
position: relative;
padding: 1rem;
flex: 1;
}
.col img {
max-width: 100%;
}
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
Hope that's how you wanted it to look

why does my column become vertical, not as design?

I am a newbie with HTML CSS and here is my problem.
I coded a very simple HTML CSS program and here is my HTML CSS program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.col {
text-align: center;
background-color: #ccc;
background-clip: content-box;
margin-top: 8px;
margin-bottom: 8px;
}
body {
margin: 0;
}
.container {
text-align: center;
}
.course-item {
background-color: orange;
height: 260px;
}
h1 {
color: #fff;
line-height: 260px;
}
</style>
</head>
<body>
<div class="grid wide container">
<div class="row">
<div class="col l-3">
<div class="course-item">
<h1>course 1</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 2</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 3</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my css program
.grid {
width: 100%;
display: block;
padding: 0;
}
.grid.wide {
max-width: 1200px;
margin: 0 auto;
}
.row {
display: flex;
flex-wrap: wrap;
margin-left: -4px;
margin-right: -4px;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
.row.no-gutters .col {
padding-left: 0;
padding-right: 0;
}
My problem is, I want the block to be row, not to be vertical, as you can see in this picture
Here is my design, as you can see, the block is horizontal
So, could you please help me to solve this problem? How can I make it to be horizontal? Thank you very much for your time.

Define a width for your course-items and it should work just fine. I made it the same width as your height, for a perfect square.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.col {
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
body {
margin: 0;
}
.container {
text-align: center;
}
.course-item {
background-color: orange;
height: 260px;
width: 260px;
}
h1 {
color: #fff;
line-height: 260px;
}
.row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-left: -4px;
margin-right: -4px;
}
.row.no-gutters {
margin-left: 0;
margin-right: 0;
}
.col {
padding-left: 4px;
padding-right: 4px;
}
</style>
</head>
<body>
<div class="grid wide container">
<div class="row">
<div class="col l-3">
<div class="course-item">
<h1>course 1</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 2</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 3</h1>
</div>
</div>
<div class="col l-3">
<div class="course-item">
<h1>course 4</h1>
</div>
</div>
</div>
</div>
</body>
</html>

(probably optional, but as it isn't clear how it is currently configured, in .row { ... } use flex-flow: row wrap; instead of flex-wrap: wrap;).
In .col { ... } add flex: 1 0 auto;.
Experiment with the 1 0 in there to adjust the grow/shrink (1 1 or 0 0 may be preferable depending on your desires).

Element collapses after setting navbar to position:fixed

I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The website layout changes as I move Google developer tools window upwards

I faced the issue with the layout of website being changed by the Google developer tool window which opens when you click F12. So, to be more clear, when I click F12, the window appears but as I move the window upwards the layout gets changed, that is, gallery section reacts to the window and also moves upwards. I do not even know what is causing such problem. I really need your help. Here is the code I have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="./external/owl.carousel.min.css">
<link rel="stylesheet" href="./external/owl.theme.default.min.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="./primary-original.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="./medium-98dcfe.jpg" alt="">
<img src="./primary-original.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./external/owl.carousel.min.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>
CSS code
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
height: 70vh;
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */

This is happening because the .showcase section has the height set to 70vh, which is relative to the viewport-height. When you open the Dev Tools, the height of the window gets smaller, thus 70vh becoming less than with the full screen, thus moving the gallery upwards.
Simply remove height: 70vh; from .showcase to fix the issue.
Code snippet below:
.header {
background: #ecf0f1;
}
.header [class*='intro'] {
padding: 2rem;
}
p {
margin: 0;
}
.intro__welcome-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar {
background: white;
}
.logo-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.logo-box__motto {
font-size: 16px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
border-left: 1px solid rgba(88, 87, 87, 0.507);
padding: 0 1rem;
color: rgba(88, 87, 87, 0.507);
font-weight: bold;
line-height: 1.5;
}
.logo-box__image {
padding-right: 1rem;
}
.logo-box__motto {
width: 30%;
text-transform: uppercase;
font-size: 1.5rem;
}
.gallery {
padding: 5rem 0;
}
.gallery .content {
width: 40%;
text-align: center;
text-transform: uppercase;
font-size: 2rem;
margin: auto;
}
.gallery .content h2 {
line-height: 1.5;
}
.m-v-30 {
margin: 30px 0;
}
.content-links {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.anchor {
text-decoration: none;
color: white;
font-weight: 600;
display: inline-block;
padding: 1rem 1.5rem;
border-radius: 30px;
text-transform: uppercase;
}
.anchor:hover {
text-decoration: none;
color: white;
}
.anchor.light-red {
background: rgba(255, 0, 0, 0.658);
margin-left: 7rem;
}
.anchor.orange {
background: orange;
margin-right: 7rem;
}
.carousel-container {
height: 300px;
border-radius: 10px;
overflow-y: hidden;
}
.p-h-0 {
padding: 0;
}
.cloud {
height: 200px;
width: 100%;
background-image: url(/cloud.png);
position: absolute;
bottom: 0;
}
.showcase img {
width: 100%;
height: 100%;
}
.showcase {
/* height: 70vh; */
position: relative;
}
.header__tel-number {
color: #ff7b00;
font-weight: 700;
font-size: 1.5rem;
}
.navigation__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navigation__link a {
display: inline-block;
padding: 5px 10px;
border-radius: 20px;
text-decoration: none;
text-transform: uppercase;
color: rgba(44, 43, 43, 0.603);
font-weight: 600;
-webkit-transition: background .5s, color .5s;
transition: background .5s, color .5s;
}
.navigation__link a:hover {
color: white;
background: #ff7b00;
}
.flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navigation {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.intro__address-box p {
text-align: right;
}
/*# sourceMappingURL=main.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<title>Document</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="col-md-6 intro__welcome-box">
<p class="header__welcome-content">Welcome to our kids School!!</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="row flex-container">
<h1 class="logo-box">
<a href="#">
<img class="logo-box__image" src="./images/logo.png" alt="The logo">
</a>
<span class="logo-box__motto"> Все начинается с детской мечты</span>
</h1>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__link">О Sunnyvale</li>
<li class="navigation__link">Галерея</li>
<li class="navigation__link">Персонал</li>
<li class="navigation__link">Услуги</li>
<li class="navigation__link">Контакты</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section class="showcase">
<div class="container-fluid p-h-0">
<div class="row">
<div class="col-md-6">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg" alt="">
</div>
<div class="col-md-6">
<div class="showcase-content">
<h2>Join Our Journey</h2>
<p>of World Discovery</p>
Find Out More
</div>
</div>
</div>
</div>
</section>
<section class="gallery">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<h2>
Добро Пожаловать в галерею Sunnyvale
</h2>
</div>
<div class="content-links m-v-30">
<a class="anchor light-red" href="">Узнать больше</a>
<a class="anchor orange" href="">Смотреть Все</a>
</div>
</div>
<div class="col-md-6">
<div class="carousel-container">
<div class="owl-carousel room-carousel owl-theme">
<img src="https://www.newyorkpass.com/images/rebrand/prices_01.jpg" alt="">
<img src="https://thenypost.files.wordpress.com/2017/04/new-york.jpg?quality=90&strip=all&w=618&h=410&crop=1" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$('.room-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:1
}
}
})
</script>
</body>
</html>

The Chrome development tool is not an overlay by default, it's width/height is taken off the display screen. Since your design is responsive, it will adapt to the display size (which is browser window minus developer tool).
Solution: in the developer tool's menu, select "Undock into separate window"
Screenshot: https://i.stack.imgur.com/zhWz7.png

Grid so I can fit it entire mobile screen with no scrolling

My ultimate goal is to be able to fit my grid in 2 columns perfectly and also so it fits entire screen on my mobile devices. Right now, I still have to scroll down a bit, however that is not what I wanted. I want my screen to be not scrollable but have images/screen fit in perfectly the way I desire. Getting rid of spaces in between 2 columns perhaps. Right now my screen looks bit off and needs a little scrolling. The 2 pictures on the bottom doesn't fit and requires scrolling like shown on the picture.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../dist/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='styles/swiper.min.css') }}">
<!-- Demo styles -->
<style>
html,
body {
position: relative;
height: 100%;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
top: 0;
left: 0;
top: 0;
bottom: 0;
right: 0;
overflow-y: auto;
height: 100%;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
body {
margin: 0;
padding: 0;
background-color: white;
font: 10px/13px 'Lucida Sans', sans-serif;
}
.wrap {
overflow: hidden;
margin: 10px;
}
.box {
float: center;
position: relative;
width: 200%;
padding-bottom: 100%;
}
.boxInner {
position: absolute;
left: 50px;
right: -5px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.fixed {
position: absolute;
left: 30px;
right: 10px;
top: -10px;
bottom: 10px;
overflow: hidden;
}
.boxInner img {
width: 79%;
height: 75%
}
.boxInner img.img2 {
width: 100%;
height: 50%
}
body.no-touch .boxInner:hover .titleBox,
body.touch .boxInner.touchFocus .titleBox {
margin-bottom: 100;
}
#media only screen and (max-width: 480px) {
/* Smartphone view: 1 tile */
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.box {
width: 50%;
padding-bottom: 30%;
}
}
.topnav {
overflow: hidden;
background-color: #66CDAA;
}
.topnav a {
float: center;
display: block;
color: #f2f2f2;
text-align: center;
padding: 10px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #98FB98;
color: white;
}
.topnav .icon {
display: none;
}
.header1 {
margin: auto;
float: center;
padding: 15px;
font-size: 20px;
}
</style>
</head>
<body class="no-touch">
<!-- Swiper -->
<div class="topnav" id="myTopnav">
Let's Get To Know You!
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<!-- Define all of the tiles: -->
<div class="header1">What's your skin color?</div><br><br>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/U8pJVY0.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/Kz06qEO.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/43tH7Td.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/3uZKpV2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/SF3vYC9.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/8hujzfl.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/cxvELu2.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/zLD3Nv1.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/baYebAV.png" />
</div>
</div>
<div class="box">
<div class="boxInner">
<img class='img1' src="http://i.imgur.com/iLd0ukK.png" />
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="../dist/js/swiper.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='swiper.min.js') }}"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
});
</script>
<script type="text/javascript">
$(function() {
// See if this is a touch device
if ('ontouchstart' in window) {
// Set the correct body class
$('body').removeClass('no-touch').addClass('touch');
// Add the touch toggle to show text
$('div.boxInner img').click(function() {
$(this).closest('.boxInner').toggleClass('touchFocus');
});
}
});
</script>
</body>
</html>

It's because your "swiper container" is height:100%, but starts 33px down because of the element above it. You could try calc() css if your browser target range allows it in order to make it 100% height minus the height of the element above. Something like:
height: calc(100% - 33px);