4
Skalierbarkeit
Hallo zusammen,
ich bastele gerade an einer Webseite und komme an einem Punkt nicht weiter.
Und zwar habe ich eine Art Box erstellt damit ich den Text vom Hintergrund abheben kann.
Dazu habe ich folgenden Code verwenden:
.box1 {
overflow: hidden;
position: relative;
list-style: none;
padding: 38px 50px 31px;
margin: 0 auto;
border-radius: 15px;
opacity: 0.8;
background: url(../img/patternbox1.png);
width: 550px;
}
Leider ist diese Box nicht skalierbar. Alle andere Inhalte sind skalierbar und gut auf einem Handy zu sehen bis auf die oben genannte Box.
Besten Dank!
ich bastele gerade an einer Webseite und komme an einem Punkt nicht weiter.
Und zwar habe ich eine Art Box erstellt damit ich den Text vom Hintergrund abheben kann.
Dazu habe ich folgenden Code verwenden:
.box1 {
overflow: hidden;
position: relative;
list-style: none;
padding: 38px 50px 31px;
margin: 0 auto;
border-radius: 15px;
opacity: 0.8;
background: url(../img/patternbox1.png);
width: 550px;
}
Leider ist diese Box nicht skalierbar. Alle andere Inhalte sind skalierbar und gut auf einem Handy zu sehen bis auf die oben genannte Box.
Besten Dank!
Auf Facebook teilen
Auf Twitter teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 254314
Url: https://administrator.de/contentid/254314
Ausgedruckt am: 15.11.2024 um 13:11 Uhr
4 Kommentare
Neuester Kommentar
Hallo,
kein Wunder wenn du eine feste breite vorgibst.
Da hat er keine Möglichkeit zu skalieren.
kein Wunder wenn du eine feste breite vorgibst.
Da hat er keine Möglichkeit zu skalieren.
width: 550px; habe ich rausgenommen leider wird immernoch mobil zu groß angezeigt.
Du könntest jetzt über CSS die Display Größe und gerätetyp abfragen und dann bei Handys die breite entsprechend festlegen.
Am besten währe aber vermutlich wenn du ein bestehendes Framework wie bootstrap verwendest.
Am besten währe aber vermutlich wenn du ein bestehendes Framework wie bootstrap verwendest.
Hallo dafdag,
dafür gibt es in CSS die Grössenangaben vh und vw (view-height / view-width)
Webseite zentrieren
Dein Problem ist aber das du dem Hintergrundbild keine relative Grössenangabe mitgibst damit sich dies mit anpasst.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Beispiel mit relativen Grössenangaben für das Hintergrundbild
oder
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background- ...
Das Padding solltest du dann am besten auch mit relativen Grössenangaben versehen...
Grüße Uwe
dafür gibt es in CSS die Grössenangaben vh und vw (view-height / view-width)
Webseite zentrieren
Dein Problem ist aber das du dem Hintergrundbild keine relative Grössenangabe mitgibst damit sich dies mit anpasst.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Beispiel mit relativen Grössenangaben für das Hintergrundbild
background-size: 100%;
background-size: contain;
Das Padding solltest du dann am besten auch mit relativen Grössenangaben versehen...
Grüße Uwe
1
