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!

Please also mark the comments that contributed to the solution of the article

Content-Key: 254314

Url: https://administrator.de/contentid/254314

Printed on: April 23, 2024 at 08:04 o'clock

4 Comments

Latest comment

Hallo,

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.

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