CODEWITHSUNDEEP
htmlcss
clauu
clauu

Reputation: 91

Div gets cut off when trying to make the page responsive

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>

Upvotes: 0

Views: 940

Answers (1)

Emeka Okafor
Emeka Okafor

Reputation: 457

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">

Upvotes: 1

Related Questions