alter-simpel: Flexbox CSS Textformatierung erlischt bei kleinem Viewport

SELF-Forum

Flexbox CSS Textformatierung erlischt bei kleinem Viewport

alter-simpel Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Hallo in die Runde

Beim Versuch erstmals mit Flexbox zu hantieren stoße ich auf Folgendes:

Textformatierungen mit CSS werden ab einer bestimmten Verkleinerung des Viewports (Smartphone) nicht mehr dargestellt. Dasselbe geschieht mit Bildern in den Flexboxen.

Was mache ich falsch? Habe recht lange gesucht, aber nichts dazu gefunden. Bin jetzt nich so der Crack ... Bin für jede Hilfe dankbar ;)

Hier der Code:

/*flexbox */

    
      body {
		background: url(img/hintergrund-wolken.jpg) ;
        background-position: left;
        background-attachment: fixed;
        color: black;
        padding-left: 50px;
        display:-webkit-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
      }

      /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
      header, nav, nav a, content, navigation, footer {
        border-radius: 0px 0em 0em;
        border: 1px solid;
        padding: 0px;
        margin: 0px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
        }

      header {
        background: #;        
        border-color: #d5d5d5;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
        height: 300px;
        padding: 30px;
        margin: 0px;
      }
      header * {
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
      }
      header img {
        -webkit-flex: 0 0 0px;
        flex: 0 0 150px;
        margin-right: 30px;
      }
      header nav {
        -webkit-flex: 1 1 80%;
        flex: 1 1 80%;
        
      }
      nav, nav ul, nav li{
        margin: 0;
        padding:0;
        border:none;
      }
      nav ul {
        display: -webkit-flex;
        -webkit-flex-direction: row;
        display: flex;
        flex-direction: row;
      }
      nav li {
        list-style-type:none;
        margin: 1.3em 0;
        -webkit-flex: 1 1 100%;
        flex: 1 1 100%;
      }
      nav a {
        display:inline-block;
        width:95%;
        background: #fffbf0;
        border: 1px solid #dfac20;
        margin: 0;
        text-decoration: none;
        text-align: center;
      }
      nav a:hover {
        background-color: #dfac20;
      }
 
      
      content {
        background: ;
        border-color: #df6c20;
        padding: 30px;
        }
      navigation {
		display: -webkit-flex;
        -webkit-flex-direction: row;
        display: flex;
        flex-direction: row;
        background: ;
        border-color: #8db243;
        
      }
      footer {
        background: ;
        border-color: #8a9da8;
        display:-webkit-flex;
        -webkit-flex-flow: row wrap;
        display: flex;
        flex-flow: row wrap;
        padding: 30px;
      }
      footer * {
        -webkit-flex: 1 1 0;
        -webkit-justify-content: space-between;
        flex: 1 1 0;
        justify-content: space-between;
      }
      footer p {
        text-align:right;
      }
      /* Smart Phones und Tablets mit mittlerer Auflösung */
      @media all and (min-width: 35em) {
      header img {
        margin-right: 50px;
      }
      nav ul {
        -webkit-flex-direction: row;
        flex-direction: row;
      }
      nav li {
        margin: 0 10px;
        -webkit-flex: 1 1 0;
        flex: 1 1 0;
      }
      content {
        webkit-order: 3;
        order: 3;
        }
      news {

        -webkit-flex: 1 auto;
        -webkit-order: 3;
        flex: 1 auto;
        order: 3;
      }
      navigation {
      /* durch auto werden die beiden asides in eine Zeile gesetzt */
        -webkit-flex: 1 auto;
        -webkit-order: 2;
        flex: 1 auto;
        order: 2;
      }
      footer {
        webkit-order: 5;
        order: 5;
      }
      }

     /* Large screens */
     @media all and (min-width: 50em) {
     content {
        /* Der Content wird breiter */
        -webkit-flex: 5 1 0;
        -webkit-order: 3;
        order: 3;
        flex: 5 1 0;
      }
      navigation {
        flex: 1 1 0;
      }
      #news {
        -webkit-flex: 2 1 0;
        -webkit-order: 2;
        -webkit-align-self: center;
        flex: 2 1 0;
        order: 2;
        align-self: center;
        height: 120px;
      }
      
    



/* Schriften  */

#text-logobar {
	font-family: Century Gothic, serif, ;
	font-weight: normal;
	font-style: italic;
	font-size: 13px;
	color: rgb(230,237,225);
	text-align: right;
}


#title-text {
	font-family: Century Gothic, serif;
	font-weight: normal;
	font-size: 1.3em;
	font-style: italic;
	color: rgb(230,237,225);
}

#main-text-title {
	font-family: Century Gothic, serif, ;
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
	color: rgb(230,237,225);
	
}


#main-text {
	font-family: Century Gothic, serif, ;
	font-weight: normal;
	font-style: italic;
	font-size: 20px;
	color: rgb(230,237,225);
}

#zeit-text {
	font-family: Century Gothic, serif;
	font-weight: bold;
	font-style: italic;
	font-size: 0.5em;
	color: rgb(230,237,225);
}

#disclaimer-text {
	font-family: Century Gothic, serif;
	font-weight: normal;
	font-size: 8px;
	color: rgb(209,0.0);
}
  
/* Navigation */

.myButton {
	-moz-box-shadow: -2px 1px 6px 0px #276873;
	-webkit-box-shadow: -2px 1px 6px 0px #276873;
	box-shadow: -2px 1px 6px 0px #276873;
	background-color:rgb(255,191,0);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #29668f;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family: Century Gothic, serif;
	font-size:15px;
	font-style:italic;
	padding:4px 6px;
	text-decoration:none;
	text-shadow:1px 1px 0px #010a0d;
}
.myButton:hover {
	background-color:transparent;
}
.myButton:active {
	position:relative;
	top:1px;
}


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
    
     <link href="flexbox-steering.css" rel="stylesheet" type="text/css" media="screen">
    <title>eigenes Flexbox-5</title>
</head>
<body>
		<header id="main-text">
			so, und hier irgendein Text so,<br><br> und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, 
			und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text so, und hier irgendein Text 
			

		</header>
		<navigation>
			
			<!-- Start Navigation -->
			<a href="index.html" class="myButton"><div id="r6a">Home</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="ueberuns.html" class="myButton"><div id="r6a">&uuml;ber uns</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="leistungen.html" class="myButton"><div id="r6a">Leistungen</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="referenzen.html" class="myButton"><div id="r6a">Referenzen</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="#.html" class="myButton"><div id="r6a">Navigation</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="#.html" class="myButton"><div id="r6a">Navigation</div></a>
			<!-- Abstandshalter sp1 -->
			<br><img src="img/1pix.spacer.gif" height="5" width="30"><br>
			<a href="impressum.html" class="myButton"><div id="r6a">Impressum</div></a><br>
			<!-- Ende Navigation -->
			<img src="img/1pix.spacer.gif" height="30" width="30"><br>
			
			<!-- Ende Container Navigation rechts -->
		</navigation>
		<content>
			<span id="main-text-title">Dieses Layout soll flexibel sein
			<p>Aber sicher wird das klappen, es fehlen nur noch ein paar Erfahrungen, die ich wohl irgendwo da draussen in der so genannten Widnis finde.
			</p>
			<p>
				Weiterhin kann nicht nur die Größendarstellung,
				sondern auch die Reihenfolge der Elemente unabhängig
				vom HTML-Code durch CSS festgelegt werden.
			</p>
			</span>
		</content>

		<footer>
			<a href="http://www.digital-dynamic.es" target="_blank"><div id="zeit-text">another site by digital@dynamic La Palma Canarias</div></a>
			<p><div id="zeit-text">© 2016 by digital@dynamic</div></p>
		</footer>
		
	</body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@alter-simpel

    Beim Versuch erstmals mit Flexbox zu hantieren

    Deinen Versuch kann man sich wo ansehen?

    Was mache ich falsch?

    .myButton {
	-moz-box-shadow: -2px 1px 6px 0px #276873;
	-webkit-box-shadow: -2px 1px 6px 0px #276873;
	box-shadow: -2px 1px 6px 0px #276873;
	background-color:rgb(255,191,0);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

    Weder box-shadow noch border-radius brauch in irgendeinem Browser ein Präfix.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

      alter-simpel
      – Informationen zu den Bewertungsregeln

      Danke erstmal, Gunnar - wusste ich auch nich ... bin einige Jahren WebDesign Abstinenzler gewesen und nu iss dieser Planet ganz anderst geworden.

      Dif-tor heh smusma direkt von neben dem Vulkan (= Caldera Taburiente, La Palma, Canarias) ;)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

      alter-simpel
      – Informationen zu den Bewertungsregeln

      achso - ansehen kann man sich den Versuch hier: Achtung Chaos - Badlands

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

        MrMurphy1 (Versionen)
        – Informationen zu den Bewertungsregeln

        Hallo

        Bei deinem CSS passen die öffnenden und schließenden Klammern irgendwie nicht zusammen.

        Außerdem steht dort ein schließendes style-Tag, welches nicht dorthin gehört.

        Das sollte zunächst behoben werden.

        Gruss

        MrMurphy

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

    marctrix Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hej alter-simpel,

    Du legst alles mögliche (auch die Schriftformate) für Bildschirme mit mindestens 50er Breite fest, wenn ich das richtig gesehen habe:

     @media all and (min-width: 50em)

    Wie @@MrMurphy schon sagte, hast du da wohl eine Klammer nicht/zu spät geschlossen...

    Marc

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

      alter-simpel
      – Informationen zu den Bewertungsregeln

      Vielen herzlichen Dank!

      ... eigene Blindheit ... zumindest diesmal nur das :)

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Flexbox CSS Textformatierung erlischt bei kleinem Viewport

        marctrix Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hej alter-simpel,

        ... eigene Blindheit ... zumindest diesmal nur das :)

        Wenn ich nur wüsste, warum das bei dir im Safari klappt und bei mir nicht...

        Schönen Feierabend! ;-)

        Marc

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln