Div gets cut off when trying to make the page responsive - html

Question

I am trying to create a page with a slot machine and I have some issues when I am trying to make it responsive. At some point it gets cut off when going to smaller devices. Also I think that I made it a bit complicated , I hope you guys understand my mess of a code. thanks a lot
* {
margin: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.background {
background: url("bg.jpg");
height: 500px;
padding: 270px 0;
height: 100%;
background-repeat: no-repeat;
width: 100%;
}
.all-parts {
margin: auto;
height: 300px;
width: 50%;
position: relative;
}
.slot-machine {
background: url("slot-machine.png");
background-repeat: no-repeat;
height: 500px;
width: 100%;
position: absolute;
}
.free-spins {
background: url("freespins-banner.png");
background-repeat: no-repeat;
height: 100px;
position: absolute;
top: 150px;
left: 370px;
z-index: 3;
width: 60%;
}
.click-to-spin {
background: url("diagonal-strip.png");
background-repeat: no-repeat;
position: absolute;
z-index: 3;
top: 450px;
width: 100%;
height: 130px;
background-size: cover;
}
.click-to-spin p {
text-align: center;
margin-top: 70px;
font-size: 40px;
color: rgb(247, 241, 198);
}
.first-slot img {
margin-top: -1180px;
margin-left: 215px;
width: 120px;
}
.second-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
.third-slot img {
margin-top: -1180px;
margin-left: -10px;
width: 120px;
}
first-slot,
.second-slot,
.third-slot {
float: left;
}
.slot-machine-wrapper {
overflow: hidden;
height: 150px;
margin-top: 60px;
}
#media only screen and (max-width: 1400px) {
body {
background-color: red;
}
.all-parts {
width: 100%;
display: table;
}
.slot-machine {
width: 100%;
}
}
<div class="background">
<div class="all-parts">
<div class="slot-machine">
<div class="slot-machine-wrapper">
<div class="first-slot">
<img src="slot-strip.png">
</div>
<div class="second-slot">
<img src="slot-strip.png">
</div>
<div class="third-slot">
<img src="slot-strip.png">
</div>
</div>
</div>
<div class="free-spins">
</div>
</div>
<div class="click-to-spin">
<p>Click to spin!</p>
</div>
</div>

Answer 1

i will suggest you use css #media queries to break points, for example
// Small devices (landscape phones, 576px and up)
#media (min-width: 576px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:200px;
width:70%;
position: absolute;
}
}
// Medium devices (tablets, 768px and up)
#media (min-width: 768px) {
.slot-machine {
background:url("slot-machine.png");
background-repeat: no-repeat;
height:250px;
width:80%;
position: absolute;
}
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
#media (min-width: 1200px) { ... }
just place the css value that will likely change accross devices in each #media queries above, also remember to have this in your meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">