Blog ~ Twenty Sixteen Theme Cascading Style Sheet [CSS] [Mobile Devices], 03/13

Well, I thought this was it [for a while]l until, I looked at my mobile devices in landscape mode…

This slideshow requires JavaScript.

They were okay; but, okay just is not good enough. Fortunately, CSS allows targeting specific devices based on screen resolution [number of pixels]. This code yields a more appealing appearance, whether in portrait or landscape orientation. Again, lots of hours, but worth it in the end. Enjoy…

/** MOBILE DEVICES–BEGIN **/
@media screen and (max-width: 767px) {
/* for mobile devices, 03/11 */
div.site-header-main {
/* needed to keep image from crushing the masthead, 03/11 */
height: 125px;
}

header#masthead.site-header {
/* place article title closer to image on mobile devices
padding-bottom from 20-10px, 03/11 */
padding-bottom: 10px;
}

h1.site-title,p.site-title {
/*set the masthead for a tight appearance on mobile devices, 03/11 */
line-height: 1;
}

h2.entry-title {
/* reduce font-size 1 px from PC font-size and reduced line height, 03/11 */
font-size: 18px;
line-height: 1.2 !important;
}

div.entry-summary p {
/* tighten excerpt vertical spacing, 03/11 */
line-height: 1.1;
}

.site-main {
/* To center main content for mobile devices, NEW 03/13 */
margin: 0 auto;
width: 100%;
}

.entry-footer {
/* give more vertical space before footer and center it on mobile devices, 03/11 */
padding-top: 3px;
text-align: center;
}

.site-footer {
/* center left footer text on mobile devices, NEW 03/09 */
text-align: center;
}
}

@media (min-width: 700px) and (orientation: landscape) {
.widget_jetpack_display_posts_widget .jetpack-display-remote-posts h4 {
/* Display for posted articles for mobile device, NEW 03/13 */
margin: 0 auto;
width: 100%;
}

.site-main {
/* Article placement for moblie device, NEW 03/13 */
margin: 0 auto;
width: 100%;
padding-left: 100px;
}

.widget {
/* Widget placement for moblie device, NEW 03/13 */
margin-left: 58px;
width: 100%;
margin-bottom: 10px;
}

.textwidget > :last-child {
/* set Legal and Disclaimer content place for mobile device, NEW 03/13 */
margin: 0 auto;
width: 100%;
}

div.menu-social-links-container {
/* center right footer container for mobile device–landscape mode, WAS ABOVE–03/13 */
margin: 0 auto;
width: 100%;
padding-left: 200px;
}
}

@media (min-width: 400px) and (orientation: portrait) {
div.menu-social-links-container {
/* center right footer container for mobile device in portrait mode, NEW 03/13 */
margin: 0 auto;
width: 100%;
padding-left: 70px;
}
}

/** MOBILE DEVICES–END **/

See these modifications at the blog Custom Twenty Sixteen CSS Page.

Author: jalexartis

Avid cyclist, who loves photography, technology, blogging & cooking...

Your comments please...

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s