Ordinare in modo responsive immagine e testo da tablet e mobile:
Inserire in “opzioni tema” – “css personalizzato” il seguente codice:
@media screen and (max-width: 767px){
.img_section{
order:1;
}
.text_heading{
order:2;
padding-top:30px;
}
.section_img_text{
display:flex;
flex-direction:column;
}
}
Questa regola entra in funzione su smartphone e tablet grazie alla media queries “@media screen and (max-width: 767px)” ovviamente, il valore in pixel può essere modificato in funzione delle necessità.
Prima
con un layout simile al seguente:
da mobile verrà visualizzato cosi:
Inserendo nella riga della sezione contenente testo e immagine, al quale si vuole applicare l’ordine, la classe css section_img_text
e inserendo la classe da impostazioni della colonna text_section (per la colonna testo ) e img_section (per la colonna immagine)
non appena la viewport scende sotto i 767 pixel viene richiamata la regola css precedentemente inserita nel “css personalizzato” ordinando gli elementi sempre e comunque nel seguente modo:
Dopo
Vuoi lasciare un commento?