Blog ~ Cascading Style Sheet [CSS]–Px to Em, 03/22

Good morning,

541048-64 pxemIf you have been using the code in my Twenty Sixteen Customized Cascading Style Sheet, you will no longer find pixels used in the sheet. If you are new, you will only see Ems as the measurement unit of size. What is this madness?

Glad you asked. I have a page that explains. Read it here.

Sample Coding:

header#masthead.site-header {
/* set masthead position and spacing, padding-bottom from 30-20px, 03/11 */
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: .9375em;
}

div.site-header-main {
/* shorten the site header height so the header image moves up, 03/13 */
height: 7.4375em;
}

.header-image {
/* set spacing above and below banner */
margin-top: 0;
margin-bottom: 0;
}

h1.site-title, p.site-title {
/* set the masthead font size I want for posts and pages */
font-size: 2.3125em;
padding-top: .3125em;
}

Bottom line: Web sites display better on mobile devices using relative [Ems or %] versus static measurements [pixels]. I see differences on my smartphones and on the emulators I use to verify coding. I hope the use of Ems works for you…

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