0
Also weiß ich, dass die Medienabfrage funktioniert, weil der andere Selektor, den ich gestylt habe, gut funktioniert. Aber der "div.A> #greet" Selektor funktioniert überhaupt nicht. Ich habe dort eine rote Farbe eingefügt, damit ich sicher sagen kann, wenn es funktioniert, aber der Text bleibt gleich und hat sich nicht bewegt. Was ich wirklich mit dem Text anfangen muss, ist es zu zentrieren. Ich habe alles versucht, was ich denken oder finden kann. Bitte helfen :)In meiner CSS-Medienabfrage wird ein bestimmter Selektor nicht erkannt.
/* .....show borders for sizing....
* {
\t border: 1px solid black;
}
*/
body {
\t box-sizing: border-box;
\t align-content: center;
}
.A {
\t margin-top: 4%;
}
#logo {
\t height: 100px;
\t width: 220px;
\t float: left;
}
#greet {
\t float: right;
\t padding-top: 1%;
\t padding-left: 10%;
}
div#greet > h1 {
line-height: .01em;
font-family: 'Titillium Web', sans-serif;
text-transform: uppercase;
color: #3D3D3D;
}
div#greet > h2 {
\t font-family: 'Muli', sans-serif;
\t color: #3D3D3D;
}
.jumbotron {
position: relative;
width: 100%;
max-height: 500;
overflow: hidden;
background-color: #FFFFFF !important;
margin: 0 !important;
}
.hero {
\t position: relative;
\t width: 100%;
\t height: 100%;
\t overflow: hidden;
\t margin: 0;
}
#zippity {
\t text-align: center;
\t text-transform: uppercase;
\t font-family: 'Titillium Web', sans-serif;
\t padding-bottom: 1.5%;
\t color: #3D3D3D;
\t margin: 0;
}
.dooda {
\t display: inline;
\t text-align: center;
}
#Pics {
\t height: 60%;
\t max-width: 100%;
\t padding-top: 8%;
\t padding-bottom: 8%;
}
#BB {
\t border-top: 3px solid #0D4B6E;
\t border-bottom: 6px solid #0D4B6E;
\t padding-top: 2%;
\t padding-bottom: 1%;
}
div#BB > h1 {
\t text-transform: uppercase;
\t font-family: 'Muli', sans-serif;
\t font-size: 200%;
\t line-height: .001em;
\t color: #3D3D3D;
\t letter-spacing: -.04em;
}
div#BB > h2 {
\t text-transform: lowercase;
\t font-family: 'Bilbo', cursive;
\t font-size: 230%;
\t line-height: .5em;
\t color: #BB1F25;
\t letter-spacing: .03em;
}
footer#copy {
\t background-color: #3D3D3D !important;
}
p {
\t color: white;
\t text-align: center;
\t font-family: 'Muli', sans-serif;
}
.sam {
\t text-decoration: underline;
}
/* for mobile */
@media screen and (max-width: 570px) {
\t div.A > #logo {
\t \t display: block;
\t \t text-align: center;
\t \t margin-left: auto;
\t \t margin-right: auto;
\t \t float: none;
\t \t height: 30%;
\t \t width: 50%;
\t }
\t div.A > #greet {
\t \t float: none;
\t \t text-align: center;
\t \t color: #BB1F25;
\t }
}<!DOCTYPE html>
<html>
<head>
\t
\t <meta charset="utf-8"/>
\t <title>Hello, I’m Sam</title>
\t <link rel="stylesheet" type="text/css" href="css.css"/>
\t <link href="https://fonts.googleapis.com /css?family=Titillium+Web:600" rel="stylesheet">
\t <link href="https://fonts.googleapis.com/css?family=Muli:300" rel="stylesheet">
\t <link href="https://fonts.googleapis.com/css?family=Bilbo" rel="stylesheet">
\t <meta name="viewport" content="width=device-width, initial-scale=1">
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
\t <div class="container">
\t \t <div class="A">
\t \t \t <img id="logo" src="Images/Logo.png"/>
\t \t \t </div>
\t \t \t <div id="greet">
\t \t \t \t <h1>Hello, I'm Sam</h1>
\t \t \t \t <h2>Web Designer</h2>
\t \t \t </div>
\t \t </div>
\t </div>
\t <img class="jumbotron hero" src="Images/hero1.jpg"/>
\t <h1 id="zippity">Portfolio</h1>
\t <div class="container">
\t \t
\t \t <div class="dooda row">
\t \t \t <div class="tech col-md-4">
\t \t \t \t <div id="BB">
\t \t \t \t \t <h1>Technoline</h1>
\t \t \t \t \t <h2>technoline.com</h2>
\t \t \t \t </div>
\t \t \t \t <img id="Pics" src="Images/technoline.jpg"/>
\t \t \t </div>
\t \t \t <div class="maj col-md-4">
\t \t \t \t <div id="BB">
\t \t \t \t \t <h1>Majestique</h1>
\t \t \t \t \t <h2>majestique.com</h2>
\t \t \t \t </div>
\t \t \t \t <img id="Pics" src="Images/majestique.jpg"/>
\t \t \t </div>
\t \t \t <div class="sil col-md-4">
\t \t \t \t <div id="BB">
\t \t \t \t \t <h1>Silverzim</h1>
\t \t \t \t \t <h2>silverzim.com</h2>
\t \t \t \t </div>
\t \t \t \t <img id="Pics" src="Images/silverzim.jpg"/>
\t \t \t </div>
\t \t </div>
\t
\t </div>
\t <footer class="jumbotron" Id="copy">
\t \t <p>© 2016 <span class="sam">Sam's Web Dev</span> All rights reserved</p>
\t </footer>
</body>
</html>
'div.A> # greet' funktioniert nicht, weil es ein stray-end-Tag vor' # greet' -Element (in HTML) gibt – nmnsud