Modificare dinamicamente layout pagina

[ivanisevic82]

Quello che dici con i css è possibile. Anzi sarebbe la soluzione più corretta.

Grazie ancora.

Questo è il mio codice, che ha la funzione di mostrare alternativamente il contenuto del pannello 1 o del 2 a secondo dell'input checked (si può testare, funziona):

<div class="tabset">
  <!-- Tab 1 -->
  <input type="radio" name="tabset" id="tab1" checked>
  <label for="tab1">TESTO TAB 1</label>
  <!-- Tab 2 -->
  <input type="radio" name="tabset" id="tab2">
  <label for="tab2">TESTO TAB 2</label>
  
  <div class="tab-panels">
    <section class="tab-panel">
CONTENUTO PANNELLO 1
  </section>
    <section class="tab-panel">
CONTENUTO PANNELLO 2
    </section>
  </div>


 <style>


    
.tabset > input[type="radio"] {
position: absolute;
left: -200vw;
}


.tabset > input:checked ~ .tab-panels > .tab-panel {
display: none;
animation: fadeOut 0.6s;
}


.tabset > input:checked ~ .tab-panels > .tab-panel.is-active {
display: block;
animation: fadeIn 0.6s;
}


.tabset > input:checked:nth-of-type(1) ~ .tab-panels > .tab-panel:nth-of-type(1),
.tabset > input:checked:nth-of-type(2) ~ .tab-panels > .tab-panel:nth-of-type(2)
 {
animation: fadeIn 0.6s;
display: block;
}


.tabset > label {
  position: relative;
  display: inline-block;
  padding-bottom: 21px;
  margin-right: 30px;
  cursor: pointer;
  color: #4d4d4d;
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
top: 8px;
font-variation-settings: "wght" 400;
will-change: font-variation-settings, color;
transition: font-variation-settings 0.3s , color 0.3s;
}


.tabset > label::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: #054363;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  top: 26px;
  opacity: 0;
}


.tabset > label:hover::after,
.tabset > input:focus + label::after,
.tabset > input:checked + label::after {
  transform: scaleX(1);
  opacity: 1;
}


.tabset > label:hover,
.tabset > input:focus + label,
.tabset > input:checked + label {
font-variation-settings: "wght" 600;
color: #054363;
}    
    
.tab-panels {
margin-top: 20px;
}
    
label[for="tab1"] {
width: 101px; /* larghezza fissa */
}


label[for="tab2"] {
width: 217px; /* larghezza fissa */
}
 </style>

Vorrei che al di sotto dei 900px tutto questo "sparisca" e si veda solo il contenuto del tab-panel (quelli che nell'esempio si chiamato "CONTENUTO PANNELLO 1" e CONTENUTO PANNELLO 2") come se fossero due normali DIV con i contenuti che si dispongono uno di seguito all'altro.

Sicuramente dovrò usare qualcosa tipo:

@media (max-width: 900px) {
...............
}

Il problema è che non so come apportare le modifiche di cui ho parlato perché non l'ho mai fatto.

Per praticità ho postato tutto qui, ma se si va troppo off-topic chiudiamo e apro un nuovo topic in CSS.

Grazie!

EDIT: Riguardando il codice e provando a modificarlo, mi sembra proprio che ci voglio qualche regola che al resize elimini delle classi (se non degli elementi). Si può fare questo via css?? Io pensavo si potesse fare solo via JS o PHP.