bootstrap mobile menu

Question

Witam, takie anomalia w skrypcie mobile menu:
https://www.w3schools.com/howto/howto_js_mobile_navbar.asp

Gdy dołączam arkusz stylów bootstrap, który odpowiada za całą stronę:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

Skrypt mobile menu trochę robi się zniekształcony, ramy trochę wychodzą poza brzegi, ale normalnie działa, nie jestem do końca przekonany czy te style są niezbędne, ale jak to ograniczyć?

Mam to normalnie w stronie głównej w stylach, czyli chyba powinien być priorytet?

/* The device with borders */
div.smartphone {
  position: relative;
  width: 360px;
  height: 640px;
  margin: auto;
  border: 16px black solid;
  border-top-width: 60px;
  border-bottom-width: 60px;
  border-radius: 36px;
}

/* The horizontal line on the top of the device */
div.smartphone:before {
  content: '';
  display: block;
  width: 60px;
  height: 5px;
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 10px;
}

/* The circle on the bottom of the device */
div.smartphone:after {
  content: '';
  display: block;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translate(-50%, -50%);
  background: #333;
  border-radius: 50%;
}

/* The screen (or content) of the device */
div.smartphone div.content {
  width: 360px;
  height: 640px;
  background: white;
}

body

<div class="smartphone">
  <div class="content">
    
  </div>
</div>

 

Answer 1

div.smartphone div.content {
  width: 360px;
  height: 640px;
  max-width: 100%;
  max-height: 100%;
  background: white;
}

Wystarczy ograniczyć maksymalną wysokość i szerokość diva

Comments

ok skołowany:)