...das kannst du alles testen!

1. öffne die Seite im Chrome Browser
2. öffne die dev-Tools (strg+I)
3. klick auf das Handy-Symbol oben links (das 2. Symbol)
4. suche Dir das Gerät aus, welches Du testen möchtest
5. Taste F5 zum aktualisieren

Wenn Du testen möchtest, wie es auf einem Handy aussieht, hänge an die URL der Seite "/?mobile=1" an.
(...und damit Google glücklich ist, solltest Du unbedingt die mobile Ansicht aktivieren!)

LG, az


PS:...damit meine Testseite (http://dublin-test.jimdo.com/) auf dem IPad richtig dargestellt wird, habe ich eine sog. media-query hinzugefügt. Ich hab mein Layout Deiner Testseite angepasst. Diese media-query müsste also auch bei Dir passen:

 
    @media (max-width: 1240px) /* Breite Browserfenster */{ 
        #content {
            width: calc(100% - 330px); 
        }    
        #cc-m-12627153935 { display:none;} 
/*zweite Sidebar verschwindet, wenn Browserfenster schmaler als 1240px */
    }
   
 

Infos dazu hier: https://wiki.selfhtml.org/wiki/CSS/Media_Queries

...dafür musst Du mit den Werten für .layout-alignment und #content spielen. z.B.:

.layout-alignment {
    width: 90%;
}
#content {
    position: absolute;
    z-index: 1;
    width: calc(100% - 662px);
    margin-left: 270px;
    border: 1px solid #ccc;
}
 

LG, az


PS: Du kannst Dem Content auch eine fixe Breite zuweisen, z.B.: #content {width: 650px !important; } Dann musst Du aber den Randabstand der rechten Sidebar prozentual anlegen, am besten mit calc(...), oder Du gibst allen Breiten fixe Werte.

LG, az
.

...oder Du legst die rechte Sidebar so, dass sie den Content ein kleines bisschen überlappt - dann musst Du ihr aber einen höheren z-index geben, als #content hat:

#cc-m-12627153935 {
    z-index: 200;
    position: absolute;
    left: 1000px;
    top: 20px;
    width: 260px;
    background-color: white;
    border: 1px solid #ccc;
}
 

LG, az

Hallo @nykytah,

...ich finde, Du machst das sehr gut! Aber jetzt scheint Dir was daneben gegangen zu sein, oder?

versuch mal diesen Code, ob dir das gefällt:

.layout-alignment {
	width: 1180px !important;
	margin: 0 auto !important;
}
 
#content {
	margin-left: 15em !important;
	margin-top: 0 !important;
	width: 40em !important;
	border: 1px solid #ccc;
	z-index: 10;
	-webkit-box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
	-moz-box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
	box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
}
 
#sidebar {
	position: absolute;
	margin-top: 20px;
	width: 16em;
	border: 1px solid #ccc;
	z-index: 20;
	-webkit-box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
	-moz-box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
	box-shadow: 9px -1px 5px -6px rgba(97,97,97,1);
}
 
#cc-m-12627153935 {
	z-index: 20;
	position: absolute;
	left: 54em !important;
	top: 0;
	width: 16em;
	background-color: white;
	border: 1px solid #ccc;
	-webkit-box-shadow: -9px -1px 5px -6px rgba(97,97,97,1);
	-moz-box-shadow: -9px -1px 5px -6px rgba(97,97,97,1);
	box-shadow: -9px -1px 5px -6px rgba(97,97,97,1);
}
 

...über den Content wirst Du dann ja wohl noch die Slideshow setzen, schätze ich? Dafür musst Du nur den margin-top bei #content noch einmal anpassen, dann sollte das auch funzen.

Diesmal habe ich alles mit fixen Breiten gemacht, da dürfte es keine Überraschungen geben. Probier es auch mal ohne @media auf dem IPad, das müsste jetzt auch klappen.

...bei mir sieht es so aus:




LG, az

Testseiten:
http://drachenkinders.jimdo.com/
http://dublin-test.jimdo.com/

...es sind nur 3 Parameter, die Du ändern mussst, z.B.:

.layout-alignment {width: 1280px !important;}
#content {width: 46em}
#cc-m-12627153935 {left: 60em !important;}

LG, az


PS: ...und #sidebar {background-color: white;} hatte ich noch vergessen :)

:) Bitte sehr! ...hier der direkte Link zu unserer: "Kaffeekasse" - Spenden sind immer willkommen!!

LG, az



PS: ...gefällt mir auch sehr! Danke für dieses tolle Thema und die vielen Anregungen!!!

Hallo @nykytah,

...super! Vielen Dank! Die "Kaffeekasse" freut sich!

Die habe ich übrigens mit einem Jotform-Formular gemacht - das ist eine gute Idee, wenn man Bestellformulare etc. für die eigene Jimdo-Seite braucht. Hier findet Ihr einen kleinen Artikel darüber: http://www.redesign-berlin.de/jimdo-tuto...jimdo-business/:



LG, az


PS: ...wenn Du Hilfe brauchst bei der grafischen Gestaltung Deiner Webseite oder bei einzelnen Elementen, kannst Du mich gern anschreiben. Sowas mache ich auch sehr gern!