skalierung verschachtelte div responsive

akdesign

Erfahrenes Mitglied
Hallo Zusammen,

bin am Verzweifeln, kann mir jemand sagen, warum die verschachtelte div bei der Anpassung für's mobile Gerät nicht mit skaliert wird?

Hier der Code:
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

</head>

<body>

<div id="distance"></div>

    <div id="gesamt">
   
        <header>
            <div id="logo"><img src="images/logo.png"></div>
        </header>
       
        <main>
            <div id="content"><img src="images/background.jpg">
                <div id="wrapper"></div>
            </div>
        </main>
   
    </div>
   
</body>
</html>


Und css:
Code:
@charset "UTF-8";
/* CSS Document */

html, body {
    height:100%;
    padding:0;
    margin: 0;
    background-color: #00131b;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    border-width: 0px;
}

               
#distance {
     width: 1px; /* für vertikale Zentrierung auch im IE */
     height:50%;
     margin-bottom:-415px; /* halbe Gesamthöhe */
     float:left;
}


#gesamt    {
    width: 1366px;
    height: 830px;
    background-color: #00131b;
    margin:0 auto; /* unbedingt drin lassen */
    position:relative; /* puts container in front of distance */
    clear:left; /* unbedingt drin lassen */
    background-color: antiquewhite;
}



#logo    {
    margin: 0;
    padding: 18px 0px 0px 0px;
    float: right;
}


#content    {
    width: 1366px;
    height: 660px;
    margin: 0;
    padding:0;
    /*background-image: url(images/background.jpg);
    background-repeat: no-repeat;*/
}


#wrapper    {
    width: 920px;
    height: 500px;
    padding:0;
    margin: 190px 0px 0px 0px;
    background-image: url(images/wrapper.jpg);
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    position: absolute;
}




@media only screen and (max-device-width: 1024px) {
   
   
       
img {
        max-width: 100%;
        max-height: 100% ;           
}
       
#gesamt    {
    width: 100%;
    height: 100%;
}
   
#content    {
    width: 100%;
    height: 100%;
}
   
#wrapper    {
    width: 100%;
    height: 100%;   
}



}
 
bin am Verzweifeln, kann mir jemand sagen, warum die verschachtelte div bei der Anpassung für's mobile Gerät nicht mit skaliert wird?
Mobil wird bei mir skaliert, nur nicht am Desktop. Dort erscheint (Browser-Viewport < 1380px) der horizontale Scrollbalken.

Willst Du darauf hinaus?

Grund dafür ist max-device-width.
 
Zuletzt bearbeitet:
Hallo SpiceLab,

der content wird ja skaliert, aber der wrapper nicht, der bleibt groß - also zumindest bei mir
 
Na ja, schon. Aber mit einer Skalierung sind Content-Hintergrundbild und Wrapper-Hintergrundbild dann ja nicht identisch - siehe Screenshot. (das etwas hellere Bild ist die wrapper div)

Kann man nicht sagen, die Content-div wird skaliert und alle divs in der Content div werden automatisch entsprechend mitskaliert?
 

Anhänge

  • IMG_0011.jpg
    IMG_0011.jpg
    62,9 KB · Aufrufe: 2
OK, danke mal soweit. Ich werde mich morgen nochmal damit beschäftigen und ggf. wieder melden.
Schönen Abend noch.
 
Zurück