0

I have just started writing code in HTML/CSS/JS and I am a total beginner.

1) I have almost finished my website but at the end I decided to change the background image to an automatic slideshow. The problem is that the slides are not wide enough (see the following image) 1. What should I do to make the slides wider to get rid of white gaps on both sides?

Here is my 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-->

Here is my CSS.

/*Home Section*/

.home {
    height: 100vh;
    background-size: cover;
    background-position: center;
}

And 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);    
}

At the top of the CSS code I wrote the following:

html {
scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.container {
    max-width: 1140px;
    margin: auto;
}
.row {
    display: flex;
    flex-wrap: wrap;

2) UPD: THX for help now it works!

Looking forward to getting answer from you guys. Thank you in advance.

Fatima Demina
  • 1
  • 1
  • 1. Seems like your parent element has margins (left and right). – demkovych Jan 27 '20 at 13:50
  • 2. Add `padding-top: XXpx;` to your `#home` element, where XX is a height of your header. – demkovych Jan 27 '20 at 13:52
  • 1
    would be cool if you will share your code in some code sandboxes, like jsfiddle – demkovych Jan 27 '20 at 14:06
  • @demkovych Thx for the second answer, it helped! As for the first one, if I am not mistaken, the parent element here is the 'container' with white gaps. So, at the beginning of the whole CSS code I wrote the following - body { margin: 0; font-family: 'Montserrat', sans-serif; } *{ box-sizing: border-box; margin: 0; } .container { max-width: 1140px; margin: auto; } " Should I change something here? – Fatima Demina Jan 27 '20 at 14:16

2 Answers2

0

Welcome to Stackoverflow. For your first problem try to set the margin of the body to 0

// 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);    
}
/*Home Section*/

body {
  margin: 0;
}

.home {
    height: 100vh;
    background-size: cover;
    background-position: center;
}
<!--Start Home-->
<section class="home" id="home">
    <div class="container">
        <div class="mySlides">
            <img src="https://picsum.photos/200/300"style="width:100%">
          </div>
          <div class="mySlides">
            <img src="https://picsum.photos/1024" style="width:100%">
          </div>
          <div class="mySlides">
            <img src="https://picsum.photos/1024" style="width:100%">
          </div>
          <div class="mySlides">
            <img src="https://picsum.photos/1024" style="width:100%">
          </div>
          <div class="mySlides">
            <img src="https://picsum.photos/1024" style="width:100%">
          </div>
    </div>
</section>
Markus
  • 1,909
  • 4
  • 26
  • 54
  • 1. If I am not mistaken, the parent element here is the 'container' with white gaps. So, at the beginning of the whole CSS code I wrote the following - body { margin: 0; font-family: 'Montserrat', sans-serif; } *{ box-sizing: border-box; margin: 0; } .container { max-width: 1140px; margin: auto; } " Should I change something here? I tried to add body to the Home section but nothing changed. – Fatima Demina Jan 27 '20 at 14:11
  • Can you see padding or margin in the devtools of your browser for the `container` element? – Markus Jan 27 '20 at 14:14
  • It is written box-sizing:border-box; color:rgb(0, 0, 0); display:none; font-family:Montserrat, sans-serif; height:auto; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; padding-top:70px; width:100% – Fatima Demina Jan 27 '20 at 14:18
0

I believe this is happening because of margin or padding on parent elements.

while i design, i see this type of issues very often.

What i used to do is, i always reset browser css (which applies default margins & padding).

CSS reset?: https://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do/

https://marksheet.io/css-reset.html

(this will help you out understand what's may happening)

check parent elements width whether it is covering the whole width of browser or not in dev console.

try this:

*{margin:0; padding:0} 
/* at the top of css */
Ishu
  • 117
  • 7