Webseite wird auf unterschiedlichen Geräten anders angezeigt.

lano

Mitglied
Moin.
Ich hab mich mal mit CSS versucht.
Aber so einiges versteh ich nicht.
Erstmal stell ich mir die Frage wie ich die Größe der Einzelnen Sachen nach Displaygröße anzeige.
Dann wie ich den Button zum absenden kleiner bekomme.
Wie ich nen Rahmen um das Eingabefeld + den Text bekomme.
Und wie ich das Infofeld in die Mitte bekomme.

So sieht das bisher aus. http://lano.lan4lano.de/dev/fbtools/fb_productiondate/

Kann mir da einer Tips geben ?
 

asc

Mitglied
devCommunity-Experte
Erstmal stell ich mir die Frage wie ich die Größe der Einzelnen Sachen nach Displaygröße anzeige.
Das geht mit media-queries:

Beispiel:
CSS:
.link {
  color: blue; // standard-farbe
}

@media (min-width: 1200px) {
  .link {
    color: red; // wenn der viewport mindestens 1200px breit ist, rote links verwenden
  }
}

Dann wie ich den Button zum absenden kleiner bekomme.
In deinem Fall musst du das padding reduzieren

Wie ich nen Rahmen um das Eingabefeld + den Text bekomme.
Idr. mittels "border: breite typ farbe"

Und wie ich das Infofeld in die Mitte bekomme.
Das kommt drauf an. Ist das Beispiel noch aktuell?
Statt mit position:absolute und transform kannst du folgendes mal probieren:

CSS:
#bgimg {
  display: grid;
  place-content: center;
}

position: absolute und transform von ".middle" vorher entfernen.
 
Oben Unten