Hallo,
nachdem ich heute schon einmal sehr schnelle Hilfe bekommen habe, versuche ich nun noch einmal mein Glück in einer anderen Angelegenheit (...danach funktioniert hoffentlich alles!).
Ich habe eine website (http://www.aileenkassing.com) erstellt, bei der die Navigation sich je nach Bildschirmauflösung "anpasst" - bei einer hohen Bildschirmauflöung ist sie rechts, bei einer geringeren zentriert unter meinem Logo. Der Teil funktioniert zum Glück auch.
Allerdings verändert sich die Schriftgröße momentan beim Skalieren: Momentan wird die Schrift größer, sobald das Fenster klein genug ist, um in den "Tablet-Modus" umzuspringen, und passt sich dann der Fenstergröße an. Das soll sie aber nicht...
Hat jemand eine Idee, woran das liegen könnte?
Ich weiß gerade nicht, welchen Teil von meinem code ist posten soll - der code, der die Schrift der Navigation definiert ist dieser hier:
.style-nav ul li a {text-decoration: none;color: #2F322A;font-size: 1em;text-align: center;display: block;text-transform: uppercase;padding: 8px 8px 4px 8px;}#Aber ich vermute den Fehler an irgendeiner anderen Stelle.
Daher hier der gesamte code:
@charset "UTF-8";
/* CSS Document */
html,
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
padding: 50px 0px 50px 0px;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
}
footer {
padding: 80px 30px 0px 0px;
background-color: #ffffff;
}
body {
margin-left: auto;
margin-right: auto;
background: #ffffff;
}
h1, h2, h3, h4, h5, h6 {font-family: "Raleway", sans-serif;
text-transform: none;
font-weight:600;}
h1 {font-size: 3em;}
h2 {font-size: 2em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.2em;}
h5 {font-size: 0.8em;}
a {text-decoration: none;
color:#000000;}
a:hover {text-decoration: none;
color:#000000;}
a:active {text-decoration: none;
color:#000000;}
a:visited {text-decoration: none;
color:#000000;}
a:visited {text-decoration: none;
color:#000000;}
p.overview {
text-transform: uppercase;
margin-top:1em;
font-weight:600;
}
p.megaheadline {
font-family: "Lato", sans-serif;
text-transform: uppercase;
margin-bottom:0.1em;
font-weight:600;
font-size: 3em;
}
p.headline {
font-family: "Lato", sans-serif;
text-transform: uppercase;
margin-bottom:0.1em;
font-weight:600;
font-size: 2.3em;
}
p.subheadline {
font-family: "Lato", sans-serif;
text-transform: uppercase;
margin-bottom:0.1em;
font-weight:600;
font-size: 1.3em;
}
p.question {
text-transform: none;
margin-bottom:0.1em;
font-weight:600;
font-size: 1.2em;
}
p.hardfacts {
text-transform: none;
margin-bottom:0.1em;
font-weight:600;
font-size: 0.9em;
color: #000000;
}
p.graphics {
text-transform: uppercase;
margin-bottom:0.4em;
font-weight:600;
font-size: 1.2em;
color: #000000;
}
.style-logo {
margin-left: auto;
margin-right: auto;
display: block;
width: 200px;
padding: 0px 0px 35px 0px;
}
.style-nav ul {
list-style-type: none;
}
.style-nav ul li a {
text-decoration: none;
color: #2F322A;
font-size: 1em;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px 8px 4px 8px;
}
.button {
border: 2px #FFFFFF solid;
padding: 8px 30px;
border-radius: 30px;
color: #FFFFFF;
text-decoration: none;
}
.footer-text {
font-size: 0.9em;
margin-bottom: 2em;
}
.col {
width: 100%;
}
.row:before, .row:after {
content: "";
display: table;
}
.row:after {
clear: both;
}
.col-lg-one-fifth {
float: left;
padding: 0px 5px 5px;
width: 20%;
}
hr {
display: block;
height: 3px;
border: 0;
border-top: 1px solid #000000;
margin: 1em 0;
padding: 0;
}
/*Smartphone*/
@media (min-width: 1px){
body {
max-width: 90%;
}
.style-nav ul li {
display: inline-block;
font-size: 1.8em;
}
.style-nav ul {
text-align: center;
}
.col {
float: left;
padding: 0px 14px 14px;
}
}
/*Tablet*/
@media (min-width: 700px){
body {
max-width: 90%;
}
.style-nav ul li {
display: inline-block;
font-size: 1.3em;
}
.style-nav ul {
text-align: center;
}
.col-md-one-half {
width: 50%;
}
}
/*Desktop*/
@media (min-width: 1000px){
body {
max-width: 1000px;
}
.style-logo {
float: left;
}
.style-nav {
float: right;
}
.col-lg-one-third {
float: left;
padding: 10px 10px 10px 5px;
width: 33.333333%;
}
.col-lg-one-fourth {
width: 25%;
}
}
/*Others*/
.responsive-video iframe {
position: absolute;
top: 0;
left: 1.5%;
width: 100%;
height: 100%;
}
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}