Ну, ребята, у меня есть этот код, написанный "коллегой", который забыл сделать сайт отзывчивым (без полосы прокрутки и без переполнения: скрыто).
Теперь я не могу понятьчто случилось, я попытался установить размер тела на 100% (высота и ширина) и удалить все размеры в пикселях, но все равно ничего не изменилось.Можете ли вы помочь мне, пожалуйста?Приведенный выше код является исходным, без моего редактирования.
html, .container{
height: 100%;
}
body{
background-image: url('../img/sfondo_blocchi.jpg');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
div#box1{
width: 90%;
margin-top:8%;
margin-bottom:10%;
background-color: whitesmoke;
border-radius: 15px;
opacity: 0.8;
overflow: hidden;
height: 425px;
}
/* Slideshow Manual */
.hidden1 {
display: none;
}
#slideshow {
margin: 0;
width: 100%;
overflow: hidden;
}
a:hover {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
-moz-transition: all 0.15s;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}
.hover_img:hover {
-moz-transform: scale(1.09);
-webkit-transform: scale(1.09);
transform: scale(1.05);
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.textmenu{
color:snow;
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RezzaCapaMundi</title><link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="CustomCss/styleBio.css">
<script src="js/audio.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-dark">
<a class="navbar-brand" id="id5" href="Intro.html"><span class="textmenu">Pagina iniziale</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link custom" href="Home.html"><span class="textmenu">Home</span><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link custom" href="#"><span class="textmenu">Biglietti</span></a>
</li>
<li class="nav-item">
<a class="nav-link custom" href="#"><span class="textmenu">Mappa</span></a>
</li>
<li class="nav-item">
<a class="nav-link custom" href="#"><span class="textmenu">Quiz</span></a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container" id="box1">
<div class="row">
<div class="col text-center">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6" style="margin-top: 4%;" >
<img src="img/biografia/foto1.jpeg" style="width:89%; border-radius:5px; margin-top:6%;">
</div>
<div class="col-lg-6" style="font-size:18px; margin-top: 4%; text-align:justify">
<b style="text-align: left"><strong>INCIPIT</strong></b>
<br>
<b>Mi chiamo Michele Salvemini, sono figlio di un operaio e di una maestra.
Il mio nonno paterno era falegname, quello materno era contadino.
Io sono diventato cantante, non me ne vogliano.
Sono nato a Molfetta nel 1973, precisamente il 9 Ottobre, come John Lennon con il quale ho in comune solo questa data e.. chissà.. forse lo stesso epilogo.
Da piccolino mi iscrissi ad una scuola di musica per imparare a suonare il pianoforte.
Dopo 3 mesi lasciai la scuola di musica col desiderio di abitare in una baita riscaldata da un camino alimentato dalla carcassa di un Bosendorfer gran coda.
Decisi che la musica non faceva per me. Il giorno dopo iniziai a comporre i miei primi pezzi.</b>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-lg-9" style="font-size:20px; margin-bottom: 4%; margin-top: 6%; text-align:justify" >
<b style="text-align: left"><strong>ESORDI</strong></b>
<br>
<b>Dopo aver sfornato decine di demo che torneranno utili con la mia dipartita,
magari arricchiti dagli interventi di questo o quell’altro rapper che presteranno la voce ai cd postumi,
arrivò il momento della prima pubblicazione.
<br>
Era il 1996, mi facevo chiamare Mikimix e pubblicavo dischi della stessa qualità degli ultimi dischi pubblicati dai cantanti di qualità.
A quel tempo ero troppo ingenuo per sospettare che mi avrebbero infastidito un’intera vita con questa storia di Mikimix perciò decisi di continuare…
E scusate se sputo nel piatto in cui non ho mangiato.</b>
</div>
<div class="col-lg-3 text-center" style="margin-top: 5%;" >
<img src="img/biografia/foto2.jpg" style="width:89%; border-radius:5px; margin-top:6%;">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-lg-3 text-center" style="margin-top: 5%;" >
<img src="img/biografia/foto3.jpg" style="width:89%; border-radius:5px; margin-top:6%;">
</div>
<div class="col-lg-9" style="font-size:20px; margin-bottom:4%; margin-top:6%; text-align:justify">
<b style="text-align: left"><strong>POST-MIKIMIX</strong></b>
<br>
<b>Dopo una serie di riflessioni emo, di momenti depressivi e di fallimenti amorosi, capìi che era arrivato il momento di seguire la strada dei miei avi: andare a lavorare.
Era chiaro che la musica proprio non faceva per me.
Il giorno dopo iniziai a comporre nuovi pezzi.
Mi crebbero i capelli, il pizzetto e altro..
Ero pronto a rivelare cazzutamente il mio pensiero sulle cose, senza compromessi.
Nel 1998 inizia il mio percorso come Caparezza col demo “Ricomincio da Capa”.
La musica è cambiata e inizio la trafila delle jam e dei
<div class="popup" onclick="FunctionTour()"><u>concerti</u>
<span class="popuptext" id="tour"><a style="color:white" href="Tour.html">Vai a scoprire il tour 2018.</a></span>
</div>
in pizzeria col vicinato che chiede di abbassare il volume durante l’esibizione (e non lo fa con garbo).</b>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-lg-5" style="font-size:20px; margin-bottom:4%;margin-top:3%; text-align:justify">
<b style="text-align: left"><strong>PRESENTE</strong></b>
<br>
<b>
Siamo nel 2018 e viene pubblicato il mio settimo
<div class="popup" onclick="FunctionAlbum()"><u>album</u>
<span class="popuptext" id="album"><a style="color:white;font-size:15px;" href="Album.html">Vai a vedere tutti i suoi album e demo.</a></span>
</div>
in studio (“Prisoner 709”), ho all’attivo centinaia di concerti e mi sono comprato un pianoforte..(l’inverno è stato particolarmente duro).
Che dire.. Per me la vita di un’artista è meno interessante della sua opera ma in un'altra sezione vi lascio comunque delle
<div class="popup" onclick="FunctionApprofondimenti()"><u>informazioni</u>
<span class="popuptext" id="approfondimenti"><a style="color:white; font-size:15px;" href="Approfondimenti.html">Scopri chicche ed altro.</a></span>
</div>.
utili perché la sostanza va, la forma resta..
</b>
</div>
<div class="col-lg-7" style="margin-top:5%;">
<img src="img/biografia/foto4.jpg" style="width:89%; height: 80%; border-radius:5px; margin-top:1%;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="box2">
<div class="row">
<div class="col-lg-2" style="right:30%;">
<img onclick="clicksound.playclip()" src="img/pulsanti/info.png" id="myBtn" class="hover_img" width="40%" alt=""/>
</div>
<div class="col-lg-8" align="center">
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<a onclick="clicksound.playclip()" href="#myCarousel" data-slide="prev"> <img src="img/pulsanti/slide-prev.png" width="12%" class="hover_img" alt=""/></a>
</a>
   
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<a onclick="clicksound.playclip()" href="#myCarousel" data-slide="next" ><img src="img/pulsanti/slide-suc.png" width="12%" class="hover_img" alt=""/></a>
</a>
</div>
<div class="col-lg-2" style="left:20%;">
<audio controls id="player">
<source src="audio/prisoner1.flac" type="audio/mpeg">
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
</div>
<script>
function FunctionAlbum() {
clicksound.playclip();
var popup = document.getElementById("album");
popup.classList.toggle("show");
}
function FunctionTour() {
clicksound.playclip();
var popup = document.getElementById("tour");
popup.classList.toggle("show");
}
function FunctionApprofondimenti() {
clicksound.playclip();
var popup = document.getElementById("approfondimenti");
popup.classList.toggle("show");
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="js/audio.js"></script>
</body>
</html>