Community Forums › Forums › Archived Forums › Design Tips and Tricks › Media queries for Magazine Pro
Tagged: Columns, media queries, responsive design
- This topic has 4 replies, 3 voices, and was last updated 11 years ago by
cookieandkate.
-
AuthorPosts
-
December 20, 2013 at 4:37 pm #80515
cookieandkate
MemberHi,
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!
KateDecember 20, 2013 at 7:12 pm #80545emasai
ParticipantIt 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.comJanuary 10, 2014 at 2:55 pm #84491cookieandkate
MemberOk, I'll look up standard mobile query standard widths and tinker with the code.
January 27, 2014 at 4:19 am #87206Paul
MemberHi 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!
January 28, 2014 at 5:09 pm #87580cookieandkate
MemberHi 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.