Media queries for Magazine Pro

Community Forums Forums Design Tips and Tricks Media queries for Magazine Pro

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  cookieandkate 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #80515

    cookieandkate
    Member
    Post count: 60

    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

    #80545

    emasai
    Participant
    Post count: 669

    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

    #84491

    cookieandkate
    Member
    Post count: 60

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

    #87206

    Paul
    Participant
    Post count: 4

    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!

    #87580

    cookieandkate
    Member
    Post count: 60

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.