Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Invertire div in tablet e mobile

    Salve ,su questo sito: https://www.zanzatap.com/ vorrei invertire i primi 2 div (testo Zanzariere e Tapparelle - slideshow) su tablet e mobile.

    Da CSS ho usato questo codice ma non funziona:

    codice:
    @media screen and (max-width: 768px) {
     .texthome{
    		display:flex;
    		flex-flow:column;
     }
    	
     .slide{
    		order:1;
     }
    }
    Chi può darmi una mano?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,540
    Ciao, la proprietà order funziona solo per gli elementi che stanno nello stesso livello, cioè elementi fratelli dentro lo stesso contenitore. Inoltre flex andrebbe applicato proprio all'elemento contenitore (padre), cioè quello che ha come figli diretti gli elementi per i quali vuoi modificare l'ordine. Nel tuo caso non è così, quindi anche applicando quella regola non ottieni nessun effetto visibile perché i due elementi (testo e slide) stanno dentro contenitori e livelli diversi e l'elemento .texthome non è l'elemento padre.

    Gli elementi che puoi considerare sono questi:

    codice:
    <div class="vc_row wpb_row vc_row-fluid vc_custom_1577963936129">
      <div class="wpb_column vc_column_container vc_col-sm-4">[dove è il testo]</div> 
      <div class="wpb_column vc_column_container vc_col-sm-8">[dove è lo slide]</div>
    </div>
    Puoi risolvere anche senza l'uso di order specificando invece flex-flow:column-reverse; giusto per l'elemento padre, in questo modo:
    codice:
    @media screen and (max-width: 768px) {
       .vc_custom_1577963936129{
          display: flex;
          flex-flow: column-reverse;
       }
    }
    Consiglio comunque di applicare un id o una specifica classe per poter selezionare in modo più accurato quell'elemento; quella attuale (vc_custom_1577963936129) è una classe piuttosto generica che suppongo sia stata applicata in automatico dalla piattaforma che utilizzi, quindi potrebbe anche variare e comunque rende difficile la manutenzione del CSS; se puoi applicare un id per quell'elemento sarebbe meglio.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.