Mit sogenannten Mediaqueries kannst Du Breakpoints setzen, um bspw. die Navigation ab einer gewissen Breite in ein kleines Symbol zu verwandeln oder zwei Spalten nicht mehr nebeneinander sondern auf Smartphones untereinander anzuzeigen.
Da Jimdo dem Body-Tag auf mobilen Geräten nicht mehr die CSS-Class ".mobile" gibt, ist es an der Zeit, die Media-Queries zu nutzen. Oftmals funktionieren die neuen responsive Jimdo-Templates schon gut auf den mobilen Endgeräten. Wenn Du aber noch die eine oder andere Special-Sache aufm Handy umsetzen möchtest, bist Du mit den Media-Queries gut beraten.
In Chrome lassen sich gut die einzelnen Breakpoints mit dem Entwicklertools ablesen/herausfinden.
/* für die Normale Version auf Desktop und breiteren Bildschirmen ab 768px aufwärts */
@media (min-width: 768px) {
#infokasten {display:block;}
}
/* Für die Mobile Version der Website mit Bildschirmbreiten, die kleiner als 768px sind*/
/* hier wird der #infokasten auf Bildschirmen unter 768px Breite ausgeblendet */
@media (max-width: 768px) {
#infokasten {display:none;}
}
/* WEITERE MEDIAQUERIES, um bspw. präzise einzelne Geräte anzusprechen:*/
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}