[lintschi]

hallo,

ich bin eine ziemliche technische null, ich kann nur ganz einfache css-änderungen.
schaffe aber manchmal mit zähigkeit doch, meine homepages selbst zu gestalten.

jetzt bin ich wieder an einem punkt angelangt, wo ich absolut anstehe.
die hp ist fertig, auf dem bildschirm auch ok., aber ich bekam nun die rückmeldung, dass auf mobilen geräten die texte neben den fotos total zerfleddert werden. ich selber kann das nie kontrollieren, weil ich kein internet am handy hab.

kann man etwas dagegen machen? und wenn ja, bitte, bitte WAS?

bitte um deppensichere antworten

link: luise pimpernell

[Toro]

Um dein Website von der Breite her ähnlich wie auf einem kleinem (schmalem) Browser darzustellen, ziehst du deinen Browser (auf Desktop) einfach auch schmäler. Beim Responsive-Design sollte bei 320px Breite noch alles in der Breite passen - also kein horizontaler Scrollbar erscheinen.

Um das "Problem" mit den Bildern zu ändern, kannst du den Bildern eine Klasse geben (z.B. "nicht-quetschen") und diese Klasse sprichst du im CSS mit mediaqueries unterhalb einer bestimmten Browser-Breite an, z.B.

  @media screen and (max-width: 599px) {
      .nicht-quetschen {
           display: block;
           float: none;
           width: 96%;
           height: auto;
           margin: 8px auto;
      }
}

Diese mediaquiry setzt du am Ende des stylesheets ein, sonst wird es eventuell vom danach folgenden CSS für images (img) wieder überschrieben.

[lintschi]

vielen dank!