Blog ~ Twenty Sixteen Theme Cascading Style Sheet [CSS], 03/11–B

CSS dedicated to mobile devices, making small appearance adjustments…

Many lines of CSS code work well for all devices, yet there are some elements that can look better if the adjustments are slightly different for mobile devices than those on desktops. Such is the case as shown in the images above and the code below that made those changes. This section was added and affects mobile devices [@media screen] only.

@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 artice 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 appearnce on mobile devicesm, 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;
}

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

.site-main > article {
/* set the spacing after an article–5.0em [112px] to 2.0em [80px], 03/11 */
margin-bottom: 2em;
}
}

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