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

Frage Umbruch einer <h2> Überschrift bei Breakpoints

M

Misanthrop

Mitglied
Hallo miteinander,
irgendwie habe ich eine Gedankenblockade .... normarlerweise ist es eine allereinfachste Sache....
Ich habe eine <h2> - Überschrift, die, wenn der Breakpoint sagen wir mal bei
750px liegt wie folgt getrennt wird:

media all and (max-width: 750px) {
h2 span {
display: flex;
flex-direction: column;
}
}

<h2>Neuigkeiten <span>// Ausstellungen / Lectures</span></h2>

Dabei soll also beim Umbruch von 750px in der ersten Zeile:
>>Neuigkeiten <<
in der zweiten Zeile dann :
>> // Ausstellungen / Lectures <<
stehen!!!

Soweit so gut: Nun aber soll bei einem zweiten Breakpoint, sagen wir mal:
610px also bei :
@media all and (max-width: 610px) {h2 span {} }

auch die >> zweite Zeile << nocheinmal getrennt werden:
Also in : zweite Zeile : // Ausstellungen
und in eine dritte Zeile: / Lectures

Das alles wegen einem Platzersparniss!

Wie kann man das nun bewerkstelligen?

Mit der Bitte um Ideen!

Gruss der misanthrop


 
Werbung:
Werbung:
Eine Frage im Anschluss:
Ist das soweit richtig?

HTML: 
<head>
        <style>
            h2 {
                display: flex;
                flex-direction: row;
                }
            #second {
                display: flex;
                flex-direction: row;
                }
            #second:nth-of-type(2n+0) {
                padding: 0 1.1rem;
                border: 2px dotted yellow;
                }
            span:nth-of-type(2n+0) {
                padding: 0 0 0 0.6rem;
                border: 2px dotted orange;
                }
            span:nth-of-type(3n+0) {
                padding: 0 0 0 0.6rem;
                border: 2px dotted red;
                }
            @media all and (max-width: 950px) {
                h2 {
                flex-direction: column;
                }
            }
            @media all and (max-width: 750px) {
            #second {
                flex-direction: column;
                }
            span:nth-of-type(2n+0) {
                padding: 0 0 0 0.3rem;
                border: 2px dotted orange;
                }
            span:nth-of-type(3n+0) {
                padding: 0 0 0 0.3rem;
                border: 2px dotted red;
                }
            }
        </style>
</head>
        <body>
            <h2>
                <span>Neuigkeiten&nbsp;</span>
                <span id="second">
                    <span>// Ausstellungen&nbsp;</span>
                    <span>/ Lectures&nbsp;</span>
                    <span>/ Workshops&nbsp;</span>
                </span>
            </h2>
        </body>
</html>

Der Firefox macht es wie er es soll, aber ist es so korrekt geschrieben?

Grüsse der misanthrop
 
Misanthrop schrieb:
Eine Frage im Anschluss:
Ist das soweit richtig?

HTML: 
<head>
        <style>
            h2 {
                display: flex;
                flex-direction: row;
                }
            #second {
                display: flex;
                flex-direction: row;
                }
            #second:nth-of-type(2n+0) {
                padding: 0 1.1rem;
                border: 2px dotted yellow;
                }
            span:nth-of-type(2n+0) {
                padding: 0 0 0 0.6rem;
                border: 2px dotted orange;
                }
            span:nth-of-type(3n+0) {
                padding: 0 0 0 0.6rem;
                border: 2px dotted red;
                }
            @media all and (max-width: 950px) {
                h2 {
                flex-direction: column;
                }
            }
            @media all and (max-width: 750px) {
            #second {
                flex-direction: column;
                }
            span:nth-of-type(2n+0) {
                padding: 0 0 0 0.3rem;
                border: 2px dotted orange;
                }
            span:nth-of-type(3n+0) {
                padding: 0 0 0 0.3rem;
                border: 2px dotted red;
                }
            }
        </style>
</head>
        <body>
            <h2>
                <span>Neuigkeiten&nbsp;</span>
                <span id="second">
                    <span>// Ausstellungen&nbsp;</span>
                    <span>/ Lectures&nbsp;</span>
                    <span>/ Workshops&nbsp;</span>
                </span>
            </h2>
        </body>
</html>

Der Firefox macht es wie er es soll, aber ist es so korrekt geschrieben?

Grüsse der misanthrop
Zum Vergrößern anklicken....

Ja, sieht richtig aus. Aber bei "2n+0" kannst du dir das "+0" sparen.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben