Media queries for Magazine Pro

[cookieandkate]

Hi,

I'm using the Magazine Pro theme and managed to adjust the width of the columns to suit my needs. However, I was just looking at the media queries in my styles.css and thought they probably need to be adjusted accordingly. However, I can't see a solid correlation between the numbers in the media queries and the old column widths. Can someone please tell me what, if anything, needs to be changed here?

I'm using the two-column format (content on the left, sidebar on the right) and reduced the following widths:

1140px (total columns width) reduced to 940px
750px (content) reduced to 550
360px (sidebar width) reduced to 310px

@media only screen and (max-width: 1139px) {

	.site-inner,
	.wrap {
		max-width: 960px;
	}

	.title-area {
		width: 220px;
	}

	.site-header .widget-area {
		width: 728px;
	}

	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-sidebar-content .content-sidebar-wrap {
		width: 780px;
	}

	.content {
		width: 630px;
	}

	.content-sidebar-sidebar .content,
	.sidebar-content-sidebar .content,
	.sidebar-sidebar-content .content {
		width: 450px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.home-middle .featured-content .entry,
	.sidebar-primary {
		width: 300px;
	}

	.sidebar-secondary {
		width: 150px;
	}

}

@media only screen and (max-width: 1023px) {

	.site-inner,
	.wrap {
		max-width: 750px;
	}

	.content,
	.content-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.home-middle .featured-content .entry,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.sidebar-primary,
	.sidebar-secondary,
	.sidebar-sidebar-content .content,
	.sidebar-sidebar-content .content-sidebar-wrap,
	.site-header .widget-area,
	.title-area {
		width: 100%;
	}

	.genesis-nav-menu,
	.site-header .title-area,
	.site-header .widget-area,
	.site-title {
		text-align: center;
	}

	.nav-primary {
		position: relative;
	}

	.featured-content .entry,
	.site-header .search-form,
	.site-title {
		float: none;
	}

	.site-header,
	.title-area {
		padding-top: 0;
	}

	.title-area {
		padding-bottom: 20px;
		padding-bottom: 2rem;
	}

	.header-image .site-header .title-area {
		padding-bottom: 0;
	}

	.genesis-nav-menu > .right {
		display: none;
	}

}

@media only screen and (max-width: 768px) {

	.footer-widgets,
	.nav-secondary,
	.site-footer,
	.site-header,
	.site-inner {
		padding-left: 5%;
		padding-right: 5%;
	}

	.genesis-nav-menu > .first > a {
		padding-left: 20px;
		padding-left: 2rem;
	}

	.nav-primary .responsive-menu {
		display: none;
	}

	.nav-primary #responsive-menu-icon {
		display: block;
		text-align: center;
	}

	.home-bottom .featured-content .entry,
	.home-middle .featured-content .entry {
		padding-bottom: 20px;
		padding-bottom: 2rem;
	}

	.archive-pagination li a {
		margin-bottom: 4px;
		margin-bottom: 0.4rem;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

}

Thank you very much!
Kate

[emasai]

It is really a question of whether it looks good on a smaller screen width or not. There are no hard and fast rules. Test it by reducing the width of your browser window or using one of the responsive tools, like this one http://www.studiopress.com/responsive/
then you can adjust your css accordingly.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[cookieandkate]

Ok, I'll look up standard mobile query standard widths and tinker with the code.

[Paul]

Hi there,

I'm facing a similar issue with Sixteen-Nine theme. Just wondering if you managed to get this sorted out and, if you did, perhaps you wouldn't mind sharing how you did it?

Many thanks!

[cookieandkate]

Hi there,

No, sorry, I haven't gotten around to working on this yet. I intend to look up standard/recommended widths for responsive designs and use those as a starting point.

[Author]

Posts