Beiträge von aileen

aileen · 14. Dezember 2017

Ich habe meinen Code inzwischen angepasst, aber leider ist mein Problem noch nicht behoben.

Wenn ich meine Seite auf http://www.responsive.cc checke (diverse Smartphones & Tablets), sieht alles so aus wie es soll.

Öffne ich meine website (aileenkassing.com) allerdings auf einem richtigen Mobilgerät, also z.B. auf meinem Handy oder einem iPad, wird immer der zweispaltige Tabletmodus angezeigt -sowohl auf dem neusten iPad Pro als auch auf meinem Samsung Galaxy A6. Auf einem großen Bildschirm (PC) passt alles.

Weiß jemand, woran das liegt?

Mein aktueller Code:

Code

/*Smartphone*/@media (min-width: 1px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col {float: left;padding: 0px 14px 14px;}}/*Tablet*/@media (min-width: 600px){body {max-width: 90%;}.style-nav ul li {display: inline-block;font-size: 1em;}.style-nav ul {text-align: center;}.col-md-one-half {width: 50%;}}/*Desktop*/@media (min-width: 1020px){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%;}}

bzw. falls der Fehler irgendwo anders liegen kann, hier mein gesamtes CSS:

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: 'Nunito', sans-serif;
margin-bottom:0.1em;
text-transform: uppercase;
font-weight:600;
font-size: 3.8em;
}



p.headline {
font-family: 'Nunito', sans-serif;
margin-bottom:0.1em;
text-transform: uppercase;
font-weight:600;
font-size: 2.3em;
}


p.subheadline {
font-family: 'Nunito', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
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 {


font-family: 'Nunito', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
font-weight:700;
font-size: 1.3em;
}

p.navigation {


font-family: 'Lato', sans-serif;
margin-bottom:0.3em;
text-transform: uppercase;
font-size: 1.2em;
}

.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: 1em;
}


.style-nav ul {
text-align: center;
}

.col {
float: left;
padding: 0px 14px 14px;


}
}


/*Tablet*/


@media (min-width: 600px){


body {
max-width: 90%;
}


.style-nav ul li {
display: inline-block;
font-size: 1em;
}


.style-nav ul {
text-align: center;
}

.col-md-one-half {
width: 50%;
}

}


/*Desktop*/


@media (min-width: 1020px){


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;
}

Alles anzeigen

Danke für eure Hilfe!

aileen · 13. Dezember 2017

Es hat geklappt!

Super, ich bin so froh

Danke nochmal!

aileen · 13. Dezember 2017

Oh, das habe ich übersehen. Klingt sehr logisch - iIch probiere es gleich mal aus und melde mich, ob es geklappt hat.

Vielen Dank auf jeden Fall!

aileen · 13. Dezember 2017

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:

Code

.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:

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;
}

Alles anzeigen

aileen · 13. Dezember 2017

Interessant, über die CSS pixel wusste ich noch nichts.

Da Handys anscheinend ja auch auf CSS-Pixeln basieren, kann ich einfach viel kleinere Zahlen nehmen und dann müsste es passen. Ich werde es mal ausprobieren, vielen Dank!

Und ja, ich muss mich an Prozent gewöhnen

aileen · 13. Dezember 2017

Hallo,

ich habe vor einiger Zeit angefangen, mir meine eigene Portfolio-Website zu erstellen und leider noch sehr wenig Erfahrung.

Ich habe auf meiner website (http://www.aileenkassing.com) vier "Blöcke" (Bilder) nebeneinander, die zu verschiedenen anderen Seiten leiten. Diese sollen auf einem großen/"normalen" Bildschirm nebeneinander angezeigt werden (auf Tablets die eine hohe Auflösung haben wir z.B. auf den neuen iPad Pros, ebenfalls). Auf anderen Tablets mit einer geringeren Auflösung soll es zweispaltig werden (also zwei Bilder nebeneinander und dann die anderen gleichmäßig darunter) und auf dem Handy sollen sie dann alle untereinander sein (also ein Bild pro "Reihe").

Wenn ich meine website auf "normalen", hochauflösenden Bildschirmen lade, wird alles so anzeigt, wie es soll. Auf Handys ebenfalls.

Nur bei Tablets habe ich ein Problem. Hochkant wird nur ein Bild pro Reihe angezeigt, wenn man es quer hält zwei. Dabei müssten hochkant auch mindestens zwei angezeigt werden und quer bei den meisten Tablets eher 4. Das iPad Pro, mit dem ich teste, hat eine höhere Auflösung als der Bildschirm meines Computers und trotzdem sehe ich auf meinem Computer 4 Spalten nebeneinander und auf dem iPad nur eine bzw. zwei, je nach dem wie ich es halte... Das kann doch eigentlich gar nicht sein?!

Hier mein Code:

Code

/*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: 1000px){


body {
max-width: 778px;
}


.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: 1080px){


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%;
}

}

Alles anzeigen

Die Angaben unter "min-width" und "max-width" machen überhaupt keinen Sinn mehr, aber ich habe schon sehr viel damit rumgespielt und hatte so die besten Ergebnisse (leider...).

Ich glaube, ich bin gerade einfach blind und sehe irgendeinen offensichtlichen Fehler nicht.

Kann mir jemand helfen?

Vielen Dank!
Aileen

Beiträge von aileen

Website-Anzeige auf Tablets fehlerhaft

Schriftgröße in Navigation vergrößert sich beim skalieren (?!)

Schriftgröße in Navigation vergrößert sich beim skalieren (?!)

Schriftgröße in Navigation vergrößert sich beim skalieren (?!)

Website-Anzeige auf Tablets fehlerhaft

Website-Anzeige auf Tablets fehlerhaft