0
So habe ich einen Blog-Titel (siehe Snippet), bestehend aus drei Wörtern. Wenn die Größe der Registerkarte geändert wird, verschiebt das responsive Design das I vom Haupttext weg (und das sieht einfach doof aus). Grundsätzlich möchte ich, dass der Titel unabhängig von der Größe der Seiten gleich aussieht (dh wie er in voller Größe aussieht - öffne das Snippet auf der ganzen Seite und ändere die Größe der Seite, um zu sehen, worüber ich rede). Wie kann ich den Reflow stoppen, indem ich das Ich an besonderen Orten platziere?Schützen Sie Titel Inhalt Formatierung mit Responsive Design
@import url(http://fonts.googleapis.com/css?family=Montserrat);
@import url(http://fonts.googleapis.com/css?family=Raleway);
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Raleway';}
body #master_site_wrapper {
margin-top: 15px;
}
.container-fluid {
padding-left: 0;
padding-right: 0;
}
.no-padding {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
div#masthead_wrapper {
display: inline-block;
color: #fff;
}
.masthead-content-wrapper {
background-image: url(http://i.imgur.com/fTPfBGX.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: right center;
height: 300px;
}
.destinations-section-wrapper {
width: 45%;
height: 0;
}
.masthead-content {
width: 75%;
margin: 0 auto;
}
/* Uses Flexbox to align text vertically */
.title-container {
width: 35%;
position: absolute;
display: flex;
justify-content: center;
flex-direction: column;
height: 300px;
z-index: 10;
}
h2.title {
font-family: 'Montserrat';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 70px!important;
font-weight:bold!important;
line-height: 0.9;
color: white;
}
h5.subtitle {
font-family: 'Raleway';
text-transform: uppercase;
letter-spacing: 2px;
font-size: 40px!important;
color :white;
}
@media screen and (max-width: 850px) {
h2.title {
font-size: 2em !important;
}
h5.subtitle {
font-size:1.5em !important;
}
.content {
font-size:100% !important;
}
blockquote {
font-size:100% !important;
}
}
@media screen and (max-width: 1200px) {
.title-container {
width: 70% !important;
}
}
.pure-g-r [class *="pure-u"] {
font-family: 'Raleway';
}
.pure-g [class *="pure-u"] {
font-family: 'Raleway';
text-align: left;
}
/* Rounded avatars */
.avatar {
float: left;
margin-top: 1em;
margin-right: 1em;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
-moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}
.youtube {
float: none;
clear: both;
margin: auto;
\t position: relative;
padding-bottom:25px;
padding-top: 25px;
width: 80% !important;
}
.youtube iframe {
top: 0;
left: 0;
width: 100%;
}
a.reference.external {
\t color: #6633CC;
\t display: inline;
\t padding: 0;
}
/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/
body {
font-family: Raleway;
font-size: 100%;
line-height: 1.5;
text-align: justify;
\t /*max-width: 900px;*/
\t font-size: 16px;
}
a {
color: #0A5693;
}
a:hover {
text-decoration: underline;
}
ul {
margin: 0.8em 1.5em;
}
li {
line-height: 1.5;
text-align:left;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway';
font-weight:bold;
color: #001;
line-height: 1;
}
h1 {
font-family:'Montserrat';
font-size: 300%;
\t text-align: left;
}
.h2, h2 {
font-size: 25px!important;
}
.h3, h3 {
font-size: 20px!important;
}
.table th, .table td { line-height: 1.3; }
/* Classes for Typographics Niceties */
.amp {
font-family: 'Gabriela', sans-serif;
color: #666;
/*font-style: italic;*/
}
.caps {
font-size: 0.92em;
font-variant: small-caps;
}
.day_suffix {
vertical-align: super;
font-size: 70%;
}
.smallprint {
font-size: 85%;
font-style: italic;
line-height: 1.25;
}
body {
line-height: 1.7em;
color: #7f8c8d;
font-size: 13px;
}
h1,
h2,
h3,
h4,
h5,
h6,
label {
color: #34495e;
}
.pure-img-responsive {
max-width: 1920px;
height: 50%;
}
/*
* -- LAYOUT STYLES --
* These are some useful classes which I will need
*/
.l-box {
padding: 1em;
}
.l-box-lrg {
padding: 2em;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.is-center {
text-align: center;
}
p {
margin: .8em 0;
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*
* -- PURE FORM STYLES --
* Style the form inputs and labels
*/
.pure-form label {
margin: 1em 0 0;
font-weight: bold;
font-size: 100%;
}
.pure-form input[type] {
border: 2px solid #ddd;
box-shadow: none;
font-size: 100%;
width: 100%;
margin-bottom: 1em;
}
/*
* -- PURE BUTTON STYLES --
* I want my pure-button elements to look a little different
*/
.pure-button {
background-color: #1f8dd6;
color: white;
padding: 0.5em 2em;
border-radius: 5px;
}
a.pure-button-primary {
background: white;
color: #1f8dd6;
border-radius: 5px;
font-size: 120%;
}
/*
* -- MENU STYLES --
* I want to customize how my .pure-menu looks at the top of the page
*/
.home-menu {
padding: 0.5em;
text-align: center;
box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
/* Fixed menus normally have a border at the bottom. */
border-bottom: none;
/* I need a higher z-index here because of the scroll-over effect. */
z-index: 4;
}
.pure-menu .pure-menu-heading {
color: #565d64;
text-transform: uppercase;
font-size: 120%;
font-weight:bold;
}
.home-menu .pure-menu-heading {
color: white;
font-weight: 400;
font-size: 120%;
}
.home-menu .pure-menu-selected a {
color: white;
}
.home-menu a {
color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
background: none;
border: none;
color: #AECFE5;
}
/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.splash-container {
background-image: url('/images/skullrr.jpg');
background-repeat: no-repeat;
\t z-index: 1;
overflow: hidden;
/* The following styles are required for the "scroll-over" effect */
width: 100%;
height: 51%;
top: 0;
left: 0;
position: absolute;
background-size: cover;
}
.splash {
/* absolute center .splash within .splash-container */
padding-right:900px;
padding-left:50px;
top: 0; left: 0; bottom: 0; right: 0;
text-align: center;
text-transform: uppercase;
}
/* This is the main heading that appears on the blue section */
.splash-head {
font-family: Montserrat;
font-size: 500%;
color: white;
text-align: left;
}
/* This is the subheading that appears on the blue section */
.splash-subhead {
font-family:Raleway;
\t text-align:left;
color: white;
\t font-size:300%;
\t font-weight:400;
letter-spacing: 0.05em;
}
/*
* -- CONTENT STYLES --
* This represents the content area (everything below the blue section)
*/
.content-wrapper {
/* These styles are required for the "scroll-over" effect */
position: absolute;
width: 100%;
min-height: 12%;
z-index: 2;
background: white;
}
/* This is the class used for the main content headers (<h2>) */
.content-head {
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 2em 0 1em;
}
/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
color: white;
}
/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
color: #1f8dd6;
}
.content-subhead i {
margin-right: 7px;
}
/* This is the class used for the dark-background areas. */
.ribbon {
background: #2d3e50;
color: #aaa;
}
/*
* -- TABLET (AND UP) MEDIA QUERIES --
* On tablets and other medium-sized devices, we want to customize some
* of the mobile styles.
*/
@media (min-width: 48em) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We want to give the content area some more padding */
.content {
padding: 1em;
}
/* We can align the menu header to the left, but float the
menu items to the right. */
.home-menu {
text-align: left;
}
.home-menu ul {
float: right;
}
/* We increase the height of the splash-container */
/* .splash-container {
height: 500px;
}*/
/* We decrease the width of the .splash, since we have more width
to work with */
/* We remove the border-separator assigned to .l-box-lrg */
.l-box-lrg {
border: none;
}
}
/*
* -- DESKTOP (AND UP) MEDIA QUERIES --
* On desktops and other large devices, we want to over-ride some
* of the mobile and tablet styles.
*/
[email protected] (max-width: 900px) {
/* We increase the header font size even more */
.splash-head {
font-size: 400%;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: rgb(142, 142, 214);
}
a:hover,
a:focus {
text-decoration: underline;
}
blockquote {
position: relative;
text-align: justify;
color: #707070;
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
}
blockquote p {
display: block;
}
.comments {
padding: 50px 0 0;
}
.banner {
background-position: center;
background-size: cover;
height: 300px;
width: 100%;
\t colour:red;
}
pre {
padding: 15px 15px 15px 15px;
font-size: 90%;
box-shadow: 2px 2px 2px #888;
}
.cover-img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-position: center;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
-moz-box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
box-shadow: inset -1px 0 0 rgba(0,0,0,0.3);
}
.cover-body {
position: absolute;
bottom: 0;
max-width: 100%;
padding-bottom: 0;
padding-top: 100px;
background-image: linear-gradient(to top,rgba(0,0,0,0.5) 0,rgba(0,0,0,0.3) 70%,rgba(0,0,0,0) 100%);
}
.brand-title,
.brand-tagline {
margin: 0;
}
.brand-title {
text-transform: uppercase;
}
.article-info {
padding-top: 15px;
clear: right;
font-weight: 300;
color: rgb(0, 0, 0);
word-wrap: break-word;
}
.article-avatar {
width: 120px;
height: 120px;
border-radius: 60px;
float: right;
margin-left: 1em;
border: 3px solid #fff;
z-index: 500;
background-color: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3);
box-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
.about-author {
display: block;
width: 85%;
padding: 0 0px;
float: right;
margin-bottom: 35px;
}
hr {
border: 1px solid #f2f2f0;
width: 10%;
margin-top: 20px;
margin-right: 0px;
}
.header-article {
width: 767px;
max-width: 100%;
text-align: right;
padding-top: 4em;
}
.header-article h5 {
clear: both;
}
.header {
text-align: left;
width: 767px;
max-width: 100%;
}
.brand-main a {
text-transform: uppercase;
text-decoration: none;
margin-left: 15px;
font-size: 25px;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.3);
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
font-family: "freight-sans-pro","Myriad Pro","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
}
.tagline {
margin-left: 15px;
margin-top: -15px;
line-height: 15px;
font-size: 80%;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #fff;
}
.social {
display: inline-block;
}
.social a {
text-decoration: none;
margin-left: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
color: #fff;
}
.links a {
font-size: 15px;
padding-left: 15px;
font-family: sans-serif;
letter-spacing: 2px;
text-shadow: 0 1px 3px rgba(0,0,0,0.3);
text-decoration: none;
color: #fff;
}
.content-subhead {
text-transform: uppercase;
color: #797979;
border-bottom: 4px solid #eee;
padding: 0.4em 0;
font-size: 80%;
font-weight: bold;
letter-spacing: 0.1em;
}
.content {
font-size: 110%;
font-weight: bold;
line-height: 1.45;
color: #333332;
margin-left: 25%;
margin-right: 25%;
background:white;
}
dd {
margin-left: 40px!important;
}
.post {
border-bottom: 5px solid #f2f2f0;
}
.post-title {
font-size:40px;
font-family:'Montserrat';
color: #34495e;
letter-spacing: -1px;
}
.post-meta {
color: #999;
margin-top: 10px;
}
.post-category {
margin: 0 0.1em;
padding: 0.2em 0.6em;
color: #fff;
background: #999;
font-size: 90%;
}
.archive-item {
padding: 10px 0;
border-bottom: 1px solid #f2f2f0;
}
.archive-date {
margin: 0;
}
.archive-post {
line-height: 130%;
}
.avatar {
/* float: right; */
margin-left: 200px;
margin-top: 50px;
width: 150px;
height: 150px;
}
.archive-meta {
color: #999;
font-size: 80%;
margin: -1px 0 0 0;
}
div.footer { border-top: 1px; padding-top: 9px;
font-size: 16px; color: #888;
text-align: center; }
div.footer a { color: #888; }
div.footer p { margin: 0; }
div.social { padding-top: 20px; padding-bottom: 10px;}
div.social a { color: #888; text-decoration: none;}
div.social ul { margin: 0; padding: 0; list-style: none; }
div.social ul li { display: inline; margin: 0 2px; padding: 0; }
.footer {
text-align: center;
padding: 2em 0;
font-size: 75%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
background: none;
}
.pagination-wrapper {
padding-top: 6px;
}
.pagination-left, .pagination-right {
position: absolute;
top: 0;
}
.pagination {
font-size: 120%;
text-align: center;
position: relative;
width: 900px;
margin: 0 auto;
max-width: 100%;
}
.pagination-left {
left: 0;
}
.pagination-right {
right: 0;
}
.go-top {
position: fixed;
bottom: 2em;
right: 2em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.3);
font-size: 12px;
padding: 1em;
display: none;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.6);
}
.highlight pre {
font-size: 75%;
}
/* landscape */
/*@media handheld and (orientation:landscape) {*/
@media all and (max-device-width: 800px) {
/* We increase the body font size */
body {
font-size: 16px;
}
/* We decrease the width of the .splash, since we have more width
to work with */
.splash {
width: 80%;
height:60%;
}
.splash-head {
font-size: 200%;
}
.splash-subhead {
font-size: 200%;
}
.post-title {
font-size:120%;
}
.content {
font-size: 80%;
line-height: 1.45;
color: #333332;
margin-left: 5%;
margin-right: 5%;
background:white;
}
.pure-menu .pure-menu-heading {
color: #565d64;
text-transform: uppercase;
font-size: 65%;
}
.avatar {
float: right;
margin-left: 16px;
margin-top: 7px;
width: 50px;
height: 50px;
}
h1 {
font-size: 180%;
}
div.social {font-size: 20px!important}
div.pagination {font-size: 10px!important}
}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/0.3.0/pure-min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<div id="master_site_wrapper">
<main role="main">
<div class="container-fluid no-padding">
<section class="no-padding" id="destination-masthead">
<div id="masthead_wrapper" class="col-xs-12">
<div class="masthead-content-wrapper">
<div class="destinations-section-wrapper green">
</div>
<div class="masthead-content">
<div class="title-container">
<h2 class="title">Something is Foxjump</h2>
<h5 class="subtitle">A Blog</h5>
</div>
</div>
</div>
</div>
Nun, Sie 'h2 haben. titel {font-size: 70px! wichtig; } 'und dann' @media Bildschirm und (max-Breite: 850px) h2.title {font-size: 2em! wichtig; } 'so ändert sich natürlich die Textgröße. Ich nehme an, wenn Sie sagen, dass Sie wollen, dass der Titel gleich aussieht, egal was die Seitengröße ist _ _ das ist nicht wirklich, was Sie meinen ... Sie _want_ die Schriftgröße ändern, aber nicht seltsam wickeln. –