As a beginner in website development, I am currently working on a new project that is still in the early stages of development. My goal is to ensure that this website is responsive for mobile devices. I have added the following meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">user-scalable=no. Despite trying various scale variations and different arguments, I have not been able to achieve the desired result. There may be an issue with the CSS. Any thoughts or suggestions would be greatly appreciated. Thank you.
function anim() {
$(".slider").delay(1000).animate({
width: 'show',
}, 1000);
}
$(document).ready(function () {
$('.carousel').carousel({
pause:"false"
})
})body {
overflow-y: scroll;
overflow-x: hidden;
background-color: moccasin;
}
.secondpic {
margin-top: 10%;
display: block;
width: 100%;
overflow: hidden;
height: auto;
position: relative;
}
arrow {
margin-top: 10%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
height: auto;
position: relative;
}
#text {
overflow: hidden;
position: relative;
text-align: center;
bottom: 5vw;
transform: rotate(-2deg);
font-size: 1.9vw;
color: #634731;
font-weight: bold;
}
.slider {
display: none;
position: absolute;
right: -60px;
top: 0;
}
.container {
margin-right: 0;
}
.navbar {
top: -100px;
white-space: nowrap !important;
padding-top: 100px !important;
float: right;
background-color: transparent;
padding-bottom: 0 !important;
border-bottom: 0 !important;
z-index: 10;
right: 0;
padding-right: 0;
position: fixed;
opacity: 1;
margin: 0;
}
.buttons {
padding-bottom: 0;
margin-bottom: 0px !important;
margin-right: -1px;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.logo {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.text-white {
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.bg-secondary {
background-color: rgba(225, 159, 113, 1) !important;
}
buttons a:hover {
background-color: orange !important;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Prosatin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script defer src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="website.js"></script>
</head>
<header>
<div class="">
<nav class="navbar navbar-expand-lg navbar-light slider">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav buttons">
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">FOTOGALERIE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">AKCE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">O NAS</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">ZPEVNIK</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">KONTAKTY</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary buttons logo"
href="https://www.facebook.com/letnistanovytaborProsatin/"><img src="facebook.png"> </a>
</div>
</div>
</nav>
</div>
</header>
<body onload="anim()">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.ibb.co/sjngKLM/tabor.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/JHYhT9Z/DSC-7364.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/yS42F7s/im2.png" alt="Third slide">
</div>
</div>
</div>
<div>
<img class="arrow" src="https://i.ibb.co/VM1v7kD/Image-5.png">
<p class="" id="text">NEJNOVEJSI FOTOGRAFIE</p>
<img class="secondpic" src="https://i.ibb.co/NjpppGn/Image-4.png">
</div>
</body>
</html>See incorrect layout on a phone
I'm experiencing some difficulties with getting the snippet and JSfiddle to work properly, but they should give you a general idea of how things are set up.