I have solved all the problems before, thank you very much for help. But now new ones appeared. The thing is that when I deleted the size of all containers (it was 1024px before), my slide images became way bigger than the screen. See the images 1[and]2. Please help cause I need slide images to be full sized on the home page without scrolling down. HTML
<!--Start Home-->
<section class="home" id="home">
<div class="container">
<div class="mySlides">
<img src="img/Home/вид1 классика.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/Home/спальня море1.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/Home/07.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/Portfolio/4/розовая комната (5).jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img/Portfolio/3/титова мал спальня (3).jpg" style="width:100%">
</div>
</div>
</section>
<!--End Home-->
CSS for the Home section
/*Home Section*/
.home {
height: 100vh;
background-size: cover;
background-position: center;
}
.home .container {
height: 850px;
}
.home .container .mySlides {
padding-top: 70px;
width: 100%;
}
CSS for the whole website (to see the characteristics of main elements)
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: 'Montserrat', sans-serif;
max-width: 100%;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
margin: auto;
}
.row {
display: flex;
flex-wrap: wrap;
}
.section-title {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
.section-title h1 {
display: inline-block;
font-size: 30px;
text-transform: uppercase;
font-weight: 500;
margin: 0 0 10px;
position: relative;
}
.text-center {
text-align: center!important;
}
.text-left {
text-align: left!important;
}
.text-right {
text-align: right!important;
}
JS
// Automatic Slideshow - change image every 5 seconds
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 5000);
}
It is written in the devtools that the section and the container has the height of 850 but the div with slides is way bigger. Don't know why. See 3
Thank in advance for help.
the
mySlides
div has noheight
value so it takes the height of his content, and even if it did had aheight
you have an overflow problem. I suggest giving the img itself theheight
value ormax-height
.