Hallo zusammen, ich habe folgende Seite:
<html>
<head>
<title>TITEL</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1280, user-scalable=no" />
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script src="lib/js/jquery-3.3.1.min.js"></script>
</head>
<style>
@font-face {
font-family: 'OpenSans';
src: url(lib/fonts/OpenSans-Regular.ttf);
}
@font-face {
font-family: 'OpenSansBold';
src: url(lib/fonts/OpenSans-Bold.ttf);
}
body {
padding: 0;
margin: 0;
font-family: OpenSans;
}
.header {
height: 25%;
width: 100%;
background-image: url('lib/img/hintergrundbild_1.jpg');
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-left: 50px;
}
.title {
font-size: 55pt;
font-family: OpenSansBold;
color: #fff;
position: absolute;
bottom: 10px;
left: 50px;
}
.content {
font-size: 16pt;
padding-left: 50px;
padding-right: 50px;
background-image: url('lib/img/hintergrundbild_2.png');
background-size: contain;
height: 75%;
width: auto;
}
.row{
margin-top: 40px;
width: auto;
}
.headline {
font-size: 20pt;
color: #004969;
}
.button {
padding: 10px 30px 10px 30px;
border-radius: 0;
background-color: #fff;
border: 1px solid;
border-color: #000;
font-size: 16pt;
}
.button-red {
color: #CC3300;
border-color: #CC3300;
}
.button-blue {
color: #004969;
border-color: #004969;
}
.button-right {
float: right;
}
.info-text {
margin-top: 10px;
color: #004969;
font-size: 14pt;
}
.info-text ul{
margin-top: 0px;
}
</style>
<body>
<div class="header">
<!-- <div class="text"> -->
<div class="title">
Seitentitel
</div>
<!-- </div> -->
</div>
<div class="content">
<div class="row">
<button class="button button-red button-right">Button 1</button>
</div>
<div class="row">
<span class="headline">Überschrift</span>
<div class="button-group">
<button class="button button-blue">Button 2</button>
<button class="button button-blue">Button 3</button>
<button class="button button-blue">Button 4</button>
<button class="button button-blue">Button 5</button>
</div>
</div>
<div class="row">
<span class="headline">Überschrift</span>
<div class="button-group">
<button class="button button-blue">Button 6</button>
<button class="button button-blue">Button 7</button>
</div>
</div>
<div class="row">
<span class="headline">Überschrift</span>
<div class="info-text">
Text
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
</ul>
</div>
</div>
</div>
</body>
</html>Das Display, auf dem die Seite geladen wird hat 1200x800px (oder 1280x800) Pixel.
Die beiden Hintergrundbilder sind
breite x 200px
breite x 600px breit.
Ich habe es bereits mit beiden Größen ausprobiert. Jedoch sind bei beiden Größen unterhalb und rechts neben dem eigentlichen Bereich noch leere Bereiche, die dadurch das Scrollen möglich machen und die Darstellung leicht verfälschen.
Das ist rechts unten. Wie zu sehen wird das Handy-Mockup nicht bis zum Rand angezeigt.
Aber eigentlich ragt das obere Bild einfach zu weit rüber.
NICHT WUNDERN: Das Handy wäre sowieso nicht komplett angezeigt worden. Aber die Schnittkante beim Handy ist automatisch auch Bildschirm-Ende!
Kann mir dabei jemand helfen?
Viele Grüße
Ben
