I am trying to have a consistent display across devices but I my CSS skills are not up to scratch.
The text on a mobile device is showing up as centered, but I cannot see most of the screen, nor can I scroll to view the other part of the page. I am not quite sure how much of my CSS code would be needed to show (although I think it is probably within the media queries block), so I am posting the parts of the stylesheet that I think are relevant. Thanks for your help.
11.0 Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
11.1 Site Content
--------------------------------------------------------------*/
.site-content {
width: 768px;
margin: 0 auto 0 auto;
}
/*--------------------------------------------------------------
11.2 HEntry
--------------------------------------------------------------*/
.sticky {
}
.hentry {
background: #fff;
border: 1px solid #f2f2f2;
margin: auto;
padding: 0px 50px 0px;
position: relative;
float: left;
}
.entry-media {
position:relative;
}
.entry-header {
margin: 50px 0;
padding: 0 50px;
text-align: center;
}
.entry-title {
font-size: 40px;
font-size: 4.0rem;
margin: 0 0 10px;
}
.error-404,
.no-results {
background: #fff;
border: 1px solid #f2f2f2;
padding: 0;
}
.page-header {
background: #f07677;
color: #fff;
padding: 25px;
text-align: center;
}
.page-title {
font-size: 18px;
margin: 0;
}
.entry-title a,
.entry-title a:visited,
.page-title a,
.page-title a:visited {
color: #333;
}
.entry-title a:hover,
.entry-title a:focus,
.entry-title a:active,
.page-title a:hover,
.page-title a:focus,
.page-title a:active {
color: #999;
}
.byline,
.updated {
display: none;
}
.single .byline,
.group-blog .byline {
display: inline;
}
.post-thumbnail {
text-align: center;
}
.post-thumbnail-backfill {
background: #f07677;
height: 80px;
}
.entry-content,
.entry-summary {
margin-bottom: 50px;
padding: 0 50px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.page-content {
margin-right: auto;
margin-left: 0px;
margin-bottom: 50px;
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/*--------------------------------------------------------------
11.3 Page Links
--------------------------------------------------------------*/
.page-links {
clear: both;
margin: 0 0 1.5em;
}
.format-gallery .page-links {
margin: 1.5em 0;
}
.page-links a,
.page-links > span {
background: #fff;
border: 1px solid #f07677;
border-radius: 4px;
display: inline-block;
margin: 0 2px 0 0;
padding: 2px 8px;
text-align: center;
}
.page-links a {
background: #f07677;
border: 1px solid #f07677;
color: #fff;
text-decoration: none;
}
.page-links a:hover {
background: #fff;
border: 1px solid #f07677;
color: #333;
}
.page-links > .page-links-title {
border: none;
margin: 0;
padding: 0 7px 0 0;
}
/*--------------------------------------------------------------
11.4 More Link
--------------------------------------------------------------*/
.more-link,
.more-link:visited {
padding: 6px 18px;
border: 1px solid #f07677;
border-radius: 4px;
display: inline-block;
margin-top: 10px;
}
.more-link:hover,
.more-link:focus,
.more-link:active {
background: #f07677;
color: #fff;
}
/*--------------------------------------------------------------
11.5 Entry Meta
--------------------------------------------------------------*/
.entry-meta {
color: #999;
}
.entry-meta a,
.entry-meta a:visited {
color: #999;
}
.entry-meta a:hover,
.entry-meta a:focus,
.entry-meta a:active {
color: #999;
}
.entry-meta-footer {
font-size: 13px;
padding: 0 50px;
}
.entry-meta-footer a,
.entry-meta-footer a:visited {
color: #f07677;
}
.entry-meta-footer a:hover,
.entry-meta-footer a:focus,
.entry-meta-footer a:active {
color: #fa7a7a;
}
.cat-links,
.tags-links,
.comments-link,
.edit-link {
margin-right: 10px;
}
/*--------------------------------------------------------------
11.6 Media Elements
--------------------------------------------------------------*/
.hentry .mejs-container {
margin: 0 0 18px;
}
.hentry .mejs-mediaelement,
.hentry .mejs-container .mejs-controls {
background: #333;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-loaded,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #fff;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-current {
background: #f07677;
}
.hentry .mejs-controls .mejs-time-rail .mejs-time-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
background: rgba(255,255,255,.33);
}
.hentry .mejs-container .mejs-controls .mejs-time {
padding-top: 9px;
}
.hentry .mejs-controls .mejs-time-rail span,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,
.hentry .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
border-radius: 0;
}
.hentry .mejs-overlay-loading {
background: transparent;
}
/*--------------------------------------------------------------
11.7 Gallery
--------------------------------------------------------------*/
.gallery {
}
.gallery-item {
float: left;
margin: 0 4px 4px 0;
overflow: hidden;
position: relative;
}
.gallery-columns-1 .gallery-item {
max-width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 48%;
max-width: -webkit-calc(50% - 4px);
max-width: calc(50% - 4px);
}
.gallery-columns-3 .gallery-item {
max-width: 32%;
max-width: -webkit-calc(33.3% - 4px);
max-width: calc(33.3% - 4px);
}
.gallery-columns-4 .gallery-item {
max-width: 23%;
max-width: -webkit-calc(25% - 4px);
max-width: calc(25% - 4px);
}
.gallery-columns-5 .gallery-item {
max-width: 19%;
max-width: -webkit-calc(20% - 4px);
max-width: calc(20% - 4px);
}
.gallery-columns-6 .gallery-item {
max-width: 15%;
max-width: -webkit-calc(16.7% - 4px);
max-width: calc(16.7% - 4px);
}
.gallery-columns-7 .gallery-item {
max-width: 13%;
max-width: -webkit-calc(14.28% - 4px);
max-width: calc(14.28% - 4px);
}
.gallery-columns-8 .gallery-item {
max-width: 11%;
max-width: -webkit-calc(12.5% - 4px);
max-width: calc(12.5% - 4px);
}
.gallery-columns-9 .gallery-item {
max-width: 9%;
max-width: -webkit-calc(11.1% - 4px);
max-width: calc(11.1% - 4px);
}
.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
margin-right: 0;
}
.gallery-caption {
background-color: rgba(0, 0, 0, 0.7);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
font-size: 12px;
line-height: 1.5;
margin: 0;
max-height: 50%;
opacity: 0;
padding: 6px 8px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
width: 100%;
}
.gallery-caption:before {
content: "";
height: 100%;
min-height: 49px;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.gallery-item:hover .gallery-caption {
opacity: 1;
}
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
display: none;
}
/*--------------------------------------------------------------
11.8 Entry Format
--------------------------------------------------------------*/
.entry-format {
color: #fff;
}
.entry-format-icon,
a.entry-format-icon,
a.entry-format-icon:visited {
background: #f07677;
bottom: -25px;
border-radius: 50%;
-webkit-box-shadow: 0 0 0 6px #ffffff;
box-shadow: 0 0 0 6px #ffffff;
color: #fff;
font-size: 25px;
line-height: 55px;
left: 0;
position: absolute;
right: 0;
margin: 0 auto;
padding: 0;
text-align: center;
width: 55px;
height: 55px;
z-index: 4;
-webkit-transition: background .5s ease;
-moz-transition: background .5s ease;
-ms-transition: background .5s ease;
-o-transition: background .5s ease;
transition: background .5s ease;
}
.entry-format-icon:hover,
a.entry-format-icon:hover {
background: #fff;
color: #f07677;
}
.entry-format-icon:focus,
.entry-format-icon:active,
a.entry-format-icon:focus,
a.entry-format-icon:active {
background: #f07677;
color: #fff;
}
.entry-format-icon > i {
}
/*--------------------------------------------------------------
11.9 Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/*--------------------------------------------------------------
11.10 Comments
--------------------------------------------------------------*/
#comments {
margin-top: 50px;
}
.comments-area-wrapper {
background: #fff;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 50px;
padding: 0;
}
.no-comments-wrapper {
background: #f0f0f0;
border-bottom: 1px solid #f2f2f2;
font-size: 18px;
margin-top: -50px;
padding: 25px;
text-align: center;
}
/* Comments Title */
.comments-title {
background: #f07677;
color: #fff;
font-size: 18px;
margin: 0;
padding: 25px;
text-align: center;
}
/* Comment Navigation */
#comment-nav-above {
margin: 0;
padding: 50px 50px 0;
}
#comment-nav-below {
margin: 0;
padding: 0 50px 50px;
}
/* Comment List */
.comment-list {
list-style: none;
margin: 0 0 50px;
padding: 50px 50px 0;
}
.comment-list .children {
list-style: none;
}
/* Comment Body */
.comment-list .comment-body {
border-bottom: 1px solid #f2f2f2;
margin: 0 0 25px;
position: relative;
padding: 0 0 25px;
}
.comment-list .pingback .comment-body {
padding-left: 0;
}
.comment-list .bypostauthor .comment-body {
background: #fafafa;
border-bottom: 3px solid #f07677;
padding: 25px;
}
.comment-list .comment-body {
padding-left: 83px;
}
.comment-list .children .comment-body {
padding-left: 54px;
}
.comment-list .bypostauthor .comment-body {
padding-left: 108px;
}
.comment-list .children .bypostauthor .comment-body {
padding-left: 79px;
}
.comment-list .comment-author .avatar {
border: 1px solid #f2f2f2;
padding: 2px;
position: absolute;
top: 0;
left: 0;
}
.comment-list .bypostauthor .comment-author .avatar {
top: 25px;
left: 25px;
}
.comment-list .comment-author .avatar {
width: 68px;
height: 68px;
}
.comment-list .children .comment-author .avatar {
width: 39px;
height: 39px;
}
.comment-list .comment-meta {
font-size: 12px;
margin-bottom: 15px;
text-transform: uppercase;
}
.comment-list .comment-content {
margin-bottom: 15px;
word-wrap: break-word;
}
.comment-list .reply {
font-size: 12px;
text-transform: uppercase;
}
.comment-list .comment-author .fn {
font-weight: 900;
}
.comment-list .comment-author .fn a,
.comment-list .comment-author .fn a:visited {
color: #333;
}
.comment-list .comment-author .fn a:hover,
.comment-list .comment-author .fn a:focus,
.comment-list .comment-author .fn a:active {
color: #999;
}
.comment-list .says {
display: none;
}
.comment-list .edit-link {
margin-left: 15px;
}
.comment-list .comment-awaiting-moderation {
color: #f07677;
margin-top: 10px;
}
/* Comment Form */
.comment-respond {
background: #fff;
border-bottom: 3px solid #f2f2f2;
margin-bottom: 50px;
padding: 50px 50px;
position: relative;
}
.comment-list .comment-respond {
padding: 0 0 25px;
}
.comment-respond .comment-reply-title {
margin: 0 0 10px;
}
.comment-respond .logged-in-as {
}
.comment-respond .comment-notes,
.comment-respond .logged-in-as,
.comment-respond .form-allowed-tags,
.comment-respond .form-allowed-tags code {
font-size: 13px;
}
.comment-respond .comment-form label {
display: block;
}
.comment-respond .required {
color: #c0392b;
}
.comment-respond #cancel-comment-reply-link {
color: #c0392b;
font-size: 14px;
position: absolute;
text-transform: uppercase;
top: 0;
right: 0;
}
/*--------------------------------------------------------------
15.0 Media Queries
--------------------------------------------------------------*/
/* For Extra Samll Devices */
@media (max-width: 768px) {
/* Site brand */
.site-branding {
padding: 25px 0;
}
.site-title {
font-size: 28px;
font-size: 2.8rem;
}
.site-description {
font-size: 14px;
font-size: 1.4rem;
}
/* Site navigation */
.main-navigation {
margin-bottom: 25px;
}
/* Mobile Menu */
.js .primary-menu {
display: none;
}
.js .slicknav-menu,
.js .menu-toggle-wrapper {
display: block;
}
/* Content */
.hentry {
max-width: 768px;
margin: 0 auto 0 auto;
padding: 25px 0;
}
.entry-header {
margin-bottom: 25px;
padding: 0 25px;
}
.post-thumbnail {
margin-bottom: 25px;
}
.entry-content,
.entry-summary {
margin-bottom: 25px;
padding: 0 25px;
}
.page-content {
margin-right: auto;
margin-left: auto;
margin-bottom: 25px;
padding: 25px 25px 0;
}
.entry-meta-footer {
padding: 0 25px;
}
/* Site Info */
.site-info {
padding: 25px 0;
}
/* Content Sidebar Wrapper */
.site-content {
padding: 25px 0;
}
/* Comments */
#comments {
margin-top: 25px;
}
.comments-area-wrapper {
margin-bottom: 50px;
}
.no-comments-wrapper {
margin-top: -25px;
}
/* Comment Navigation */
#comment-nav-above {
margin: 0;
padding: 25px 25px 0;
}
#comment-nav-below {
margin: 0;
padding: 0 25px 25px;
}
/* Comment List */
.comment-list {
margin: 0 0 25px 0;
padding: 25px 25px 0;
}
/* Comment Form */
.comment-respond {
margin-bottom: 25px;
padding: 25px 25px;
}
/* Infinite Scroll */
#infinite-handle,
.infinite-loader {
margin-bottom: 25px;
}
}
Aucun commentaire:
Enregistrer un commentaire