Support » Theme: Kelly » Media Query Breakpoints

  • Resolved Shapeshifter 3

    (@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)

    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)

    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

    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

    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)

    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

    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.