No, purtroppo è ben più visibile di così per poterlo confondere.
codice HTML:
/* MEDIA QUERIES */
@media screen and (max-width: 1300px) {
#user {background: #f1f1f1; left: 100%; transition: all 0.4s;}
#user.slidein {transform: translateX(-100%); !important;}
#usertoggler {display: inline;}
#usertoggler.slidein {transform: translateX(-560px); !important; background: url(images/userminus.png) no-repeat center #f1f1f1;}
}
@media screen and (max-width: 1024px) {
.area:nth-child(3), .area:nth-child(5) {clear: left;}
.area {width: 50%;}
}
@media screen and (max-width: 768px) {
#right {width: 100%;}
#left {width: 100%; clear: both;}
.area {clear: none;}
}
Sono gli unici 3 breakpoint impostati fin'ora.
#usertoggler è visibile solo con screen size inferiore a 1300, ed effettivamente da mobile è visibile.
Il terzo e quinto .area vanno a capo (eludono il float dell'elemento precedente) solo per screen size inferiore a 1024, ed effettivamente da mobile è così.
#left e #right passano da width: 50% a width: 100% solo per screensize inferiore a 768px, però da mobile questo non succede.
Se invece prendo la finestra del browser da desktop e la ridimensiono manualmente, tutto funziona perfettamente.
Prova tu stesso. www.maremmahost.it