skalierung verschachtelte div responsive


akdesign

Erfahrenes Mitglied
#1
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%;   
}



}
 
#2
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:

akdesign

Erfahrenes Mitglied
#6
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