Media Query Breakpoints

Resolved

(@shapeshifter-3)

I was reviewing the Breakpoints in Kelly’s Stylesheet:

/* 14.0 - Media Queries
----------------------------------------------- */
@media screen and ( min-width: 750px ) {
	.site-branding,
	.menu,
	.site-info,
	.entry-header,
	.entry-content,
	.entry-meta,
	#nav-below.paging-navigation,
	#nav-below.post-navigation,
	.comments-area,
	.widget-areas-inner,
	.page-header {
		margin-left: auto;
		margin-right: auto;
		max-width: 720px;
	}
	.widget-areas .widget-area:nth-child(1):nth-last-child(1) {
		width: 100%;
	}
	.widget-areas .widget-area:nth-child(1):nth-last-child(2),
	.widget-areas .widget-area:nth-child(2):nth-last-child(1) {
		clear: none;
		margin-right: 6%;
		width: 45%;
	}
	.widget {
		padding-left: 0;
		padding-right: 0;
	}
	.widget-area {
		float: left;
	}
	.widget-areas .widget-area:nth-child(1):nth-last-child(2):last-of-type,
	.widget-areas .widget-area:nth-child(2):nth-last-child(1):last-of-type {
		margin-right: 0;
	}
	.widget-areas .widget-area:nth-child(1):nth-last-child(3),
	.widget-areas .widget-area:nth-child(2):nth-last-child(2),
	.widget-areas .widget-area:nth-child(3):nth-last-child(1) {
		clear: none;
		margin-right: 5%;
		width: 30%;
	}
	.widget-areas .widget-area:nth-child(1):nth-last-child(3):last-of-type,
	.widget-areas .widget-area:nth-child(2):nth-last-child(2):last-of-type,
	.widget-areas .widget-area:nth-child(3):nth-last-child(1):last-of-type {
		margin-right: 0;
	}
	.main-navigation {
		text-align: center;
	}
	.main-navigation ul {
		padding: .75em 0;
	}
	.main-navigation li {
		display: inline-block;
		margin-right: 1.5em;
		position: relative;
	}
	.main-navigation a {
		border: 0;
		font-size: 0.8125em;
		padding: .375em 0;
	}
	.main-navigation ul ul {
		background: #018e7c;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
		display: none;
		float: left;
		left: 0;
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		position: absolute;
		top: 1.875em;
		z-index: 99999;
	}
	.main-navigation ul ul li {
		margin-right: 0;
	}
	.main-navigation ul ul ul {
		padding-left: 0;
		left: 100%;
		top: 0;
	}
	.main-navigation ul ul a,
	.main-navigation ul ul ul a,
	.main-navigation ul ul ul ul a {
		border-bottom: 1px solid #109987;
		padding-left: 1.5em;
	}
	.main-navigation ul ul a {
		padding: .75em 1.5em;
		text-align: left;
		width: 200px;
	}
	.main-navigation ul li:hover > ul {
		display: block;
	}
	.entry-content,
	.comment-content {
		font-size: 1.25em;
	}
	.entry-meta {
		font-size: 1em;
	}
	.hentry {
		margin-left: 1.5em;
		margin-right: 1.5em;
	}
	.entry-title,
	.page-title {
		font-size: 1.9em;
	}
	footer.entry-meta span {
		clear: none;
		display: inline-block;
		margin-right: 1.5em;
		padding: .375em 0;
	}
	footer.entry-meta span:last-child {
		margin-right: 0;
	}
	.comments-title {
		font-size: 1.625em;
	}
	.site-footer .sep {
		clear: none;
		display: inline-block;
		height: auto;
		visibility: visible;
		width: auto;
	}
	.comments-area ul.children {
		margin-left: 3em;
	}
	.format-link .entry-title a:after {
		font-size: 36px;
	}
	.has-header .site-branding {
		padding: 1.5em 0;
	}
	.entry-format:before {
		font-size: 24px;
	}
}
@media screen and ( min-width: 1250px ) {
	.site-branding,
	.menu,
	.site-info,
	.entry-header,
	.entry-content,
	.entry-meta,
	#nav-below.paging-navigation,
	#nav-below.post-navigation,
	.comments-area,
	.widget-areas-inner,
	.page-header {
		max-width: 1200px;
	}
	.site-title {
		font-size: 4.6em;
		margin: 0 auto;
		max-width: 100%;
	}
	.site-description {
		font-size: 1em;
		margin: 0 auto;
		max-width: 100%;
	}
	.main-navigation a {
		font-size: 1em;
	}
	.widget_search .search-submit {
		display: none;
	}
	.widget_search .search-field {
		border-radius: 3px;
		margin: 0 auto;
		padding-top: .75em;
		padding-bottom: .75em;
	}
	.entry-content,
	.comment-content {
		font-size: 1.625em;
	}
	.entry-meta {
		font-size: 1.25em;
	}
	.entry-title,
	.page-title {
		font-size: 2.625em;
	}
	.comments-title {
		font-size: 1.9em;
	}
	.format-link .entry-title a:after {
		font-size: 48px;
	}
	.has-header .site-branding {
		padding: 6em 0 1.5em;
	}
}

And Noticed Only Two:

@media screen and ( min-width: 750px )
@media screen and ( min-width: 1250px

Most grid systems have at least 4 to enable good Mobile Device display, so I was wondering. Can Kelly be improved by adding at least two more to the Stylesheet? It seems to cover small and large devices well, but not necessarily the middle. I’ll send a screenshot of my own site to explain what I’m looking for. It may take me awhile. I have to go out.

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter Shapeshifter 3
(@shapeshifter-3)

7 years, 7 months ago

OK, I’m Back:
Here are two screenshot’s of my site:

15 1/2″ Widescreen Laptop (Full Screen): http://snag.gy/nhwR3.jpg

Same Laptop w/Right Edge Moved left approx 2″: http://snag.gy/Pjj7M.jpg

The perceived issue: the actually width of the Content Area is greatly reduced once the screen width is reduced more than 2″. What is INCREASED at the same time, is wasted white space on both Left & Right edges of the Content Area. I don’t know if this is necessary for the theme’s design or not but I was wondering: if more Breakpoints were added, would the Content Area stay Wide for a longer period of time as the screen width is reduced.

Does this make sense, or am I missing coding procedures that I’m unaware of?
Thread Starter Shapeshifter 3
(@shapeshifter-3)

7 years, 7 months ago
In defense of my Point of View on this Topic:

The upcoming Twenty Fifteen Default Theme currently under development has 7 Breakpoints:
```
15.1 Mobile Large 620px
15.2 Tablet Small 740px
15.3 Tablet Large 880px
15.4 Desktop Small 967px
15.5 Desktop Medium 1100px
15.6 Desktop Large 1240px
15.7 Desktop X-Large 1403px
```
And, if I remember correctly Bootstrap 3 has 4 Breakpoints:
```
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
```
So to make a long story short: Can Kelly use some improvements, or is it already using other methods to get the desired results? IF it can be improved, what can be done to get the Widest Content Area Possible at all possible screen sizes?
sacredpath
(@sacredpath)

Automattic Happiness Engineer

7 years, 7 months ago

Each theme designer determines how many breakpoints they are going to use and where. I’ve seen some themes with one breakpoint where the sidebar is move down below the content and it just scales below that point (widths set as percentage).

If you think your site would look better with additional breakpoints, then by all means add them in.

sacredpath
(@sacredpath)

Automattic Happiness Engineer

7 years, 7 months ago

I’ve looked at Kelly at 320, 480, 600, 800, 768 and 1024, and they all look good and balanced to me.

Thread Starter Shapeshifter 3
(@shapeshifter-3)

7 years, 7 months ago

Are you using WordPress.com’s server with Jetpack ?

I was told that if so, Jetpack might be doing scaling for you. I’m using a shared hosting account with GoDaddy (Whom I actually Like), and don’t have or currently want to use Jetpack (I might change my mind in the future).

The reason I ask the question is that I was wondering if Kelly was designed, with the assumption that Jetpack would always be enabled in it. If so, the designer might have thought that more media queries weren’t needed since Jetpack would be doing some of the work.

I installed the Advanced Responsive Video plugin to help maintain the maximum width of embedded videos, but without that plugin the 2″ margin issue referred to above still shows up.

sacredpath
(@sacredpath)

Automattic Happiness Engineer

7 years, 7 months ago

All Automattic/WordPress.com designed themes will work stand-alone and none of them require Jetpack. Jetpack offers some of the unique features available at WordPress.com to self-hosted WordPress users.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Media Query Breakpoints’ is closed to new replies.

Media Query Breakpoints

Topic Tags

Views