Minimalistische, responsive Website

  • Moin zusammen,


    ich bin neu hier und das ist mein erster Beitrag. Ich würde mich über etwas Hilfe freuen - das wäre super :)


    Ich baue gerade eine minimalistische Website, die komplett responsiv sein soll. Die Website besteht nur aus einer Seite.


    Beim Aufruf soll vollformatig der aktuelle Veranstaltungsflyer gezeigt werden. (Das löse ich aktuell darüber, dass ich den Flyer als Background-Image eines Divs skaliere.)


    Durch scrollen soll exakt auf derselben Breite des Flyers Text folgen.

    Am Schluss soll wiederum exakt auf derselben Breite des Flyers der Link zu facebook folgen.


    Wie gesagt, alles soll responsiv sein. Die Flyer sind so dimensioniert, dass damit exakt das Seitenverhältnis vom Smartphone-Display im Hochkant-Format abgebildet wird.


    http://aRaum.de


    Anmerkung: Aktuell habe ich versucht, den Text innerhalb eines zweiten Divs, das als Hintergrund das "wback.jpg" mit genau den gleichen Pixel-Maßen wie der Flyer hat, zu arrangieren. Doch leider orientiert sich der Text nicht daran, sondern wird auf voller Breite dargestellt.


    Nun mein Problem:


    Wie bekomme ich es hin, dass der Text unter dem Flyer dynamisch genau auf die Breite des Flyers skaliert wird?


    Ich wäre super dankbar für Hilfe.


    LG Juli

  • Bau das ganze mal auf flex-Basis um und lös Dich weites gehend von fixen Wertangaben, was Breiten und Höhen angehen.

    Mal als Beispiel, wenn Du Dein HTML in etwa so aufbaust:

    reichen denke ich ein paar simple CSS Zeilen:

    CSS
    * { box-sizing:border-box; font-size:1.1em; }
    .wrapper { display:block; position:relative; max-width:600px; margin:0 auto; border:1px dotted #ccc; }
    .responsive { display:flex; flex-direction:column; }
    .text { text-align:center; }
  • Riesendank, Arne :)


    Ich habe den Quelltext jetzt entsprechend Deiner Anmerkungen umgeschrieben.


    Der Text verhält sich jetzt responsiv und ist maximal so breit wie der Flyer.


    Jedoch ist die Größe des Flyers jetzt nicht mehr responsiv. Ich würde gerne, dass beim Aufruf der Website (egal bei welcher Bildschirmauflösung/Dimensionierung des Browserfensters) das Flyer-JPG vollformatig (ggf. mit 5 Pixel Abstand zu jeder Seite, also links, rechts, oben, unten) angezeigt wird.


    Ist das mit Deiner Lösung auch möglich?


    Mit meinem DIV mit dem Flyer-JPG als background-image konnte ich das Browserfenster nach dem Laden beliebig größer und kleiner machen, während der Flyer immer vollformatig angezeigt wurde (die Version ist noch online http://araum.de).


    Ich wäre super dankbar, wenn es es eine Lösung gibt, die diese Responsivität des Flyer-JPGs beibehält :)


  • Ja, mit ein paar kleinen Anpassungen, kein Problem:

  • Riesendank - das ist super :)


    Wenn ich das Browserfenster jetzt in der Horizontalen schmaler mache, dann werden auch der Flyer und der Text schmaler. Das ist perfekt.


    Ich würde gerne, dass der Flyer ebenfalls kleiner wird, wenn ich das Browserfenster in der Vertikalen verkleinere. Ist das mit der flex-Basis auch möglich?


    Es soll halt egal bei welcher Größe des Browserfensters der Flyer komplett zu sehen sein (komplett in der Breite und in der Höhe). Der Fließtext darunter soll sich dann immer an der aktuellen Breite des Flyers orientieren.


    Wenn Du noch einen Vorschlag hättest, wäre ich Dir sehr dankbar :)


    aktueller Quelltext:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!