In meinem stylesheet habe ich folgendes gefunden:
/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
#nav-below {
border-bottom: 1px solid #ddd;
margin-bottom: 1.625em;
}
#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
/* Simplify the showcase template */
.page-template-showcase-php .featured-posts {
min-height: 280px;
}
.featured-posts section.featured-post {
height: auto;
}
.page-template-showcase-php section.recent-posts {
float: none;
margin: 0;
width: 100%;
}
.page-template-showcase-php #main .widget-area {
float: none;
margin: 0;
width: auto;
}
.page-template-showcase-php .other-recent-posts {
border-bottom: 1px solid #ddd;
}
/* Simplify the showcase template when small feature */
section.featured-post .attachment-small-feature,
.one-column section.featured-post .attachment-small-feature {
border: none;
display: block;
float: left;
height: auto;
margin: 0.625em auto 1.025em;
max-width: 30%;
position: static;
}
article.feature-image.small {
float: right;
margin: 0 0 1.625em;
width: 64%;
}
.one-column article.feature-image.small .entry-summary {
height: auto;
}
article.feature-image.small .entry-summary p a {
left: 0;
padding-left: 20px;
padding-right: 20px;
width: auto;
}
/* Remove the margin on singular articles */
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
width: 100%;
}
/* Simplify the pullquotes and pull styles */
.singular blockquote.pull {
margin: 0 0 1.625em;
}
.singular .pull.alignleft {
margin: 0 1.625em 0 0;
}
.singular .pull.alignright {
margin: 0 0 0 1.625em;
}
.singular .entry-meta .edit-link a {
left: 0;
position: absolute;
top: 40px;
}
.singular #author-info {
margin: 2.2em -8.8% 0;
padding: 20px 8.8%;
}
/* Make sure we have room for our comment avatars */
.commentlist {
width: 100%;
}
.commentlist > li.comment,
.commentlist .pingback {
margin-left: 102px;
width: auto;
}
/* And a full-width comment form */
#respond {
width: auto;
}
/* No need to float footer widgets at this size */
#colophon #supplementary .widget-area {
float: none;
margin-right: 0;
width: auto;
}
/* No need to float 404 widgets at this size */
.error404 #main .widget {
float: none;
margin-right: 0;
width: auto;
}
}
@media (max-width: 650px) {
/* @media (max-width: 650px) Reduce font-sizes for better readability on smaller devices */
body, input, textarea {
font-size: 13px;
}
#site-title a {
font-size: 24px;
}
#site-description {
font-size: 12px;
}
#access ul {
font-size: 12px;
}
article.intro .entry-content {
font-size: 12px;
}
.entry-title {
font-size: 21px;
}
.featured-post .entry-title {
font-size: 14px;
}
.singular .entry-title {
font-size: 28px;
}
.entry-meta {
font-size: 12px;
}
blockquote {
margin: 0;
}
blockquote.pull {
font-size: 17px;
}
/* Reposition the site title and description slightly */
#site-title {
padding: 5.30625em 0 0;
}
#site-title,
#site-description {
margin-right: 0;
}
/* Make sure the logo and search form don't collide */
#branding #searchform {
top: 1.625em !important;
}
/* Floated content doesn't work well at this size */
.alignleft,
.alignright {
display: block;
float: none;
margin-left: 0;
margin-right: 0;
}
/* Make sure the post-post navigation doesn't collide with anything */
#nav-single {
display: block;
position: static;
}
.singular .hentry {
padding: 1.625em 0 0;
}
.singular.page .hentry {
padding: 1.625em 0 0;
}
/* Talking avatars take up too much room at this size */
.commentlist > li.comment,
.commentlist > li.pingback {
margin-left: 0 !important;
}
.commentlist .avatar {
background: transparent;
display: block;
padding: 0;
position: static;
}
.commentlist .children .avatar {
background: none;
left: 2.2em;
padding: 0;
position: absolute;
top: 2.2em;
}
/* Use the available space in the smaller comment form */
#respond input[type="text"] {
width: 95%;
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
left: 95%;
}
#content .gallery-columns-3 .gallery-item {
width: 31%;
padding-right: 2%;
}
#content .gallery-columns-3 .gallery-item img {
width: 100%;
height: auto;
}
}
@media (max-width: 450px) {
#content .gallery-columns-2 .gallery-item {
width: 45%;
padding-right: 4%;
}
#content .gallery-columns-2 .gallery-item img {
width: 100%;
height: auto;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body {
padding: 0;
}
#page {
margin-top: 0;
}
#branding {
border-top: none;
}
Alles anzeigen
Ich habe versucht, dort Befehle zu verändern, allerdings ohne Erfolg. Wäre also super, wenn mir da jemand behilflich seien könnte. Ich würde gerne das Menü anpassen, damit das nicht mehr so zusammengeqeutscht erscheint. Außerdem habe ich das Problem, dass die Grafik für den Livestream (siehe Link Linkstream) total nach rechts verschoben und aus der Seite raus ist. Auch das würde ich gerne beheben. Ich freue mich über eure Hilfe.
Vielen Dank!
