Ciao a tutti, scusate il disturbo, sono novizio e non esperto di codice css e html, ed ho progettato una pagina che allego sotto con diversi moduli in div, senza considerare ERRONEAMENTE di farla responsive, per tutti i dispositivi, infatti quando vado alla pagina da un notebook di 13-14" succede un patatrack. Ora realmente non so da dove iniziare, piu che altro per timore di fare danni nei vari blocchi, non so se devo ridurre i px del testo e delle immagini.
Spero di non creare problemi mettendo codice e link alla pagina.
https://www.ombarcellonapg.com/saratoga/tabella_responsive.php
<style>
.table {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid transparent; /* Correggi "trasparent" in "transparent" */
margin-bottom: -15px;
padding: 10px;
}
.box-orologio {
width: 100%;
margin-right: 0px; /* Usa margin-right per separare i blocchi */
}
.orologio {
background-color: #25262b;
border-radius: 5px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 8px;
color: #E7E7E7;
}
.box-avvisi {
width: 50%;
/* Rimuovi max-width */
align-self: flex-start;
}
.avvisi {
background-color: #25262b;
border-radius: 5px;
text-align: center;
padding: 8px;
margin-left: 2px; /* Usa margin-left per separare i blocchi */
}
.box-prevattuale {
width: 50%; /* Imposta la larghezza al 50% */
height: auto;
align-self: flex-start;
background-color: #25262b;
border-radius: 10px;
color: #E7E7E7;
}
.PrevisioneAttuale {
font-family: Tahoma, Verdana, sans-serif;
text-transform: capitalize;
font-weight: 100;
font-size: 1.5em;
}
.citta {
font-family: Tahoma, Verdana, sans-serif;
font-size: 25px;
margin-left: 15px;
padding:3px;
}
.valorimaxodierni {
font-family: Tahoma, Verdana, sans-serif;
font-size: 15px;
margin-left: 5px;
padding:3px;
}
.descrizionemeteo {
float: right;
font-family: Tahoma, Verdana, sans-serif;
font-size: 19px;
margin-right: 65px;
margin-top: -27px;
}
.Big {
display: flex;
font-family: Tahoma, Verdana, sans-serif;
font-size: 6.0em ;
font-weight: bold;
margin-top: 10px;
margin-bottom: 20px;
padding: 10px;
}
.allinea {
float: left;
margin-left: 10px;
padding-right: 10px;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
font-size: 22px;
margin-bottom: 15px;
}
.iconasmall{
width: 27px;
height: auto;
padding-right: 5px;
float: left;
margin-left: 15px;
display: block;
}
img.Icona1 {
width: 175px;
float: right; /* Posiziona l'immagine a destra */
margin-top: -15px; /* Alza l'immagine sopra */
margin-right: 80px; /* Aggiungi margine a destra per separare l'immagine */
}
.contenitoreprev {
background-color: darkgray;
}
.previsioni-giorni {
position: absolute;
width: 160px;
height: 210px;
background-color: #25262b;
border-radius: 10px;
color: #E7E7E7;
padding: 18px;
margin-left: -185px;
margin-top: -10px;
margin-bottom: 4px;
}
div.Previsionepost {
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-weight: 100;
font-size: 16px;
margin-bottom: 10px;
}
img.Iconaprev {
display: flex;
flex-direction: column;
align-items: center;
width: 130px;
height: auto;
margin-top: -15px;
}
.data-previsione {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-family: Tahoma, Verdana, sans-serif;
font-size: 20px;
font-weight: bold;
color: #E7E7E7;
margin-top: -10px;
margin-bottom: 10px;
position: relative;
}
.data-container {
font-family: Tahoma, Verdana, sans-serif;
font-size: 20px;
font-weight: bold;
color: #E7E7E7;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
font-weight: bold;
cursor: pointer;
}
.day-name {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: .25s ease-out;
position: relative;
}
.day-text {
opacity: 1;
transition: .25s ease-out;
position: relative;
display: flex;
transform-origin: left center;
will-change: transform;
transform: scale(1);
}
.date-text {
font-family: Tahoma, Verdana, sans-serif;
font-size: 20px;
font-weight: bold;
color: #E7E7E7;
display: inline;
position: relative;
margin-right: 5px;
opacity: 0;
transform: scale(2.0);
}
.month-text {
font-family: Tahoma, Verdana, sans-serif;
font-size: 20px;
font-weight: bold;
color: #E7E7E7;
display: inline;
position: relative;
z-index: 1;
opacity: 0;
transform: scale(2.0);
}
.data-container:hover .day-text {
opacity: 0;
transform: scale(1);
}
.data-container:hover .date-text, .data-container:hover .month-text {
opacity: 1;
transform: scale(1);
transition-delay: .25s;
}
.hidden-text {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
font-size: 15px;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.date-text, .month-text {
display: inline;
}
.box-previsione {
width: 40%;/* Imposta la larghezza al 24% per ogni blocco di previsione */
/* Il resto del tuo stile rimane invariato */
}
.logoprev{
width: 17px;
height: 17px;
padding-right: 5px;
color: #E7E7E7;
margin: auto;
}
.scroll-container {
position: relative;
background-color: #25262b;
border-radius: 5px;
padding: 8px;
margin: 2px;
color: #E7E7E7;
font-size: 13px;
font-weight: 600;
display: flex;
align-items: center;
overflow: hidden;
}
.static-label {
margin-right: 1px;
white-space: nowrap;
background-color: #25262b;
z-index: 1;
}
.scrolling-wrapper {
position: relative;
flex-grow: 1;
overflow: hidden;
height: 100%;
display: flex;
align-items: center;
}
.scrolling-content {
display: inline-block;
white-space: nowrap;
animation: scroll 40s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="box-orologio">
<div class="orologio" id="clock">Buon pomeriggio, ore 14:40.31 di Giovedi, 12 Ottobre 2023</div>
<div class="scroll-container">
<div class="static-label">Valori Estremi Oggi:</div>
<div class="scrolling-wrapper">
<div class="scrolling-content">
<span>Max Temp: <span id="TemperaturaDMaxValue">--</span>  -  </span>
<span>Min Temp: <span id="TemperaturaDMinValue">--</span>  -  </span>
<span>Max Humidity: <span id="UmiditaDMaxValue">--</span>  -  </span>
<span>Min Humidity: <span id="UmiditaDMinValue">--</span> - </span>
<span>Max Dew Point: <span id="DewpointDMaxValue">--</span> - </span>
<span>Min Dew Point: <span id="DewpointDMinValue">--</span> - </span>
<span>Max Wind Gust: <span id="VentoDMaxValue">--</span> - </span>
<span>Max Wind Dir: <span id="WindtextDMaxValue">--</span> - </span>
<span>Rain: <span id="PioggiaValue">--</span> - </span>
<span>Rain Rate: <span id="IntensitaPioggiaDMaxValue">--</span> - </span>
<span>Uv Index Max: <span id="UvindexDMaxValue">--</span> - </span>
<span>Solar Rad Max: <span id="SolradDMaxValue">--</span> - </span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="box-prevattuale">
<div class="citta">Barcellona Pozzo Di Gotto - Nord Est / <?php echo $weather_description; ?></div>
<div class="boxicona1">
<img class="Icona1" src="<?php echo $icon_url; ?>" alt="img">
</div>
<div class="Big" id="Temperatura">--</div>
<img class="iconasmall" src="https://www.ombarcellonapg.com/saratoga/img/UmiditaW.png" alt="Umidita"><div class="allinea" id="Umidita">--</div>
<img class="iconasmall" src="https://www.ombarcellonapg.com/saratoga/img/PressioneW.png" alt="Pressione"><div class="allinea" id="Pressione">--</div>
<img class="iconasmall" src="https://www.ombarcellonapg.com/saratoga/img/VentoW.png" alt="Vento"><div class="allinea" id="Vento">--</div>
<img class="iconasmall" src="https://www.ombarcellonapg.com/saratoga/img/PioggiaW.png" alt="Pioggia"><div class="allinea" id="Pioggia">--</div>
</div>
<div class="row">
<div class="previsioni-giorni">
<div class="data-container">
<div class="day-name">
<div class="day-text"><?php echo $day_name_plus_1; ?></div>
<div class="hidden-text">
<span class="date-text"><?php echo date("j", strtotime("+1 day")); ?></span>
<span class="month-text"><?php echo $months_translation[date("F", strtotime("+1 day"))]; ?></span>
</div>
</div>
<img class="Iconaprev" src="<?php echo $icon_url_domani; ?>" alt="img">
<div class="Previsionepost">Max <?php print round($temperature_max_domani); ?> °C - Min <?php print round($temperature_min_domani); ?> °C</div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/VentoW.png" class="logoprev" alt="Vento"><?php print round($Raffica_max_domani); ?> km/h - <?php echo convertiDirezioneVento($Winddirect_max_domani); ?></div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/PioggiaW.png" class="logoprev" alt="Pioggia"><?php print round($pioggiaprob_max_domani); ?> %</div>
</div>
</div>
</div>
<div class="row">
<div class="previsioni-giorni">
<div class="data-container">
<div class="day-name">
<div class="day-text"><?php echo $day_name_plus_2; ?></div>
<div class="hidden-text">
<span class="date-text"><?php echo date("j", strtotime("+2 day")); ?></span>
<span class="month-text"><?php echo $months_translation[date("F", strtotime("+2 day"))]; ?></span>
</div>
</div>
<img class="Iconaprev" src="<?php echo $icon_url_2; ?>" alt="img">
<div class="Previsionepost">Max <?php print round($temperature_max_2); ?> °C - Min <?php print round($temperature_min_2); ?> °C</div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/VentoW.png" class="logoprev" alt="Vento"><?php print round($Raffica_max_2); ?> km/h - <?php echo convertiDirezioneVento($Winddirect_max_2); ?></div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/PioggiaW.png" class="logoprev" alt="Pioggia"><?php print round($pioggiaprob_max_2); ?> %</div>
</div>
</div>
</div>
<div class="row">
<div class="previsioni-giorni">
<div class="data-container">
<div class="day-name">
<div class="day-text"><?php echo $day_name_plus_3; ?></div>
<div class="hidden-text">
<span class="date-text"><?php echo date("j", strtotime("+3 day")); ?></span>
<span class="month-text"><?php echo $months_translation[date("F", strtotime("+3 day"))]; ?></span>
</div>
</div>
<img class="Iconaprev" src="<?php echo $icon_url_3; ?>" alt="img">
<div class="Previsionepost">Max <?php print round($temperature_max_3); ?> °C - Min <?php print round($temperature_min_3); ?> °C</div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/VentoW.png" class="logoprev" alt="Vento"><?php print round($Raffica_max_3); ?> km/h - <?php echo convertiDirezioneVento($Winddirect_max_3); ?></div>
<div class="Previsionepost"><img src="https://www.ombarcellonapg.com/saratoga/img/PioggiaW.png" class="logoprev" alt="Pioggia"><?php print round($pioggiaprob_max_3); ?> %</div>
</div>
</div>
</div>