• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Responsive Gestaltungsprobleme

Guten Morgen Daniel,
mir scheint, die Erklärung für das übergroße Logo habe ich gefunden:
CSS: 
        img.logo {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }

        @media (max-width: 1920px) {
            img.logo {
                max-width: 576px;
            }
        }
Ist der Viewport breiter als 1920px greift max-width: 100%; so dass das Logo die volle Breite des Browserfensters einnimmt. Ich konnte das nicht reproduzieren weil
  1. mein Monitor nicht so breit ist
  2. ich das Logo aus einem Screenshot von dir erzeugt habe, so dass es viel kleiner war
 
Werbung:
Hallo,
aha, danke!

Ich habe demnach einfach @media erweitert:
@media (max-width: 3840px) {
img.logo {
max-width: 576px;
}
}

Das scheint (bisher) zu funktionieren.
 
Werbung:
Ui, toll! Freut mich, dass Du das für mich tun willst. Morgen reicht auch - danke!
Ich habe noch ein Anliegen:

Wenn ich einen Textlink in einem der Content-Boxen einsetze, öffnet er den Link in einem neuen Fenster - so soll es sein. Leider, wenn man mit der Maus über den Textlink zeigt, wird unten angezeigt, wohin der Textlink führt, inklusive der vollständigen Linkstrecke. Kann man das unterbinden? Viellecht könnte man, als zusätzlichen Hover-Effekt, eine Meldung zeigen, wie der Titel-Link lautet (zB. "Google", ohne Linkstrecke). Also so eine Art Textblase, die nur auftaucht, wenn man mit der Maus auf den Textlink zeigt. Diese Nachricht könnte man auch designen, Text, Box, Border und die Nachricht verschwinden lassen, wenn man mit der Maus den Textlink verlässt?

Also, das seh ich so in meinem Kopfkino des, möglicherweise, zu kleinen Hirns - nun ja.
 
Werbung:
Ich bin jetzt mit den Änderungen fertig. Weil der Code für das Posten sowieso zu groß ist, ebenfalls als Codepen:

Laden…

codepen.io

Auf die Berechnungen der Höhen mit Javascript konnte ich weitgehend verzichten, nur nicht bei der Höhe des Content, weil sich diese nicht nach "auto" animieren lässt. flex-grow lässt sich jedoch animieren.

Auf das automatische Scrollen habe ich jetzt verzichtet weil durch das Schrumpfen des Headers der Content jetzt sichtbar wird und der Benutzer scrollen kann, falls er nicht vollständig in das Browserfenster passt.

Die Parameter für die Animation von Header und Content habe ich als CSS-Variablen an den Anfang des CSS gestellt, damit man sie nicht mühsam aufsuchen muss.

Dann viel Spaß beim Ausprobieren und einen schönen Abend!
 
Zuletzt bearbeitet:
Werbung:
Super! Das Logo passt sich jetzt gut an alle Monitorgrößen an! Die content-boxen liegen jetzt genau richtig - klasse! Das Kontaktformular passt sich leider nur von der Größe der content-box an, nicht das Formular selbst. Bei kleinen Monitoren lässt sich das Formular nicht scrollen, so, dass mann das Formular nicht vollständig sehen kann.
Kannst Du bitte erneut schauen? Passiert das jetzt bei allen conttent-boxen, mit langem Inhalt?
 
Das Formular lässt sich nicht scrollen, wohl aber die ganze Seite, jedenfalls mit meiner Testdatei:
1720523124422.png
Man kann natürlich auch das Formular scrollbar machen, aber wenn man die ganze Seite scrollen kann, hat das Vorteile:
  • Weil der Header nach oben verschwindet, wird in der Höhe das vollständige Browserfenster für die Anzeige des Formulars ausgenutzt.
  • Es ist das Verhalten was am gebräuchlichsten ist und die Benutzer sind daran gewöhnt.
Wenn Du jedoch Wert darauf legst, dass der Header immer sichtbar ist, müsste das Formular für sich scrollbar sein.
 
Ich hatte dieses Problem in meinem Browser (Firefox), denn dort sehe ich keinen Scrollbalken, auch hat sich das Formular über die Überschrift gelegt...
 

Anhänge

  • screenshot3.jpg
    screenshot3.jpg
    66,9 KB · Aufrufe: 2
Werbung:
... und auch bei größeren Monitoren lässt sich nicht der gesamte Inhalt einsehen...
 

Anhänge

  • screenshot4.jpg
    screenshot4.jpg
    93,8 KB · Aufrufe: 2
Hm, ich kann machen was ich will, ich kann immer scrollen. Auch wenn ich die Handy-Simulation im Browser einschalte, sowohl im FF als auch Opera.
Hast Du am Scrollverhalten etwas verändert, overflow: ...?
 
Werbung:
"hidden" bedeutet, dass Inhalt, der sich außerhalb des Elementes befindet abgeschnitten wird, das würde erklären, was Du beobachtest. Du musst "overflow-y" auf "scroll" setzen:
Code: 
        /* Allgemeine Stile */
        body,
        html {
            margin: 0;
            padding: 0;
            font-family: 'Big Shoulders Display', sans-serif;
            background-color: #2b2b2b;
            color: #FFDC29;
        }

        html {
            height: 100%;
            overflow-y: scroll; /* <-- Scrollen einschalten */
            scroll-behavior: smooth;
        }

        body {
            min-height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
So sieht es in meiner Testdatei aus.
 
Werbung:
Können wir es jetzt so lassen oder willst Du lieber das Formular für sich scrollbar haben? Wie schon geschrieben, ich sehe Vorteile, wenn die ganze Seite scrollbar ist.
 
Um Gottes Willen.. lassen! Du hast doch recht, dass die Seite scrollbar ist. Man... Du bist so gut, so perfekt... Du siehst, wo es hapert, wo der Fehlerteufel steckt... und ich... nun ja... eben ein Dummerle.

Dankeschön, jetzt hast Du mir zum 2. Mal geholfen. Danke!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben