Community Forums › Forums › Archived Forums › Design Tips and Tricks › Media Query & iPhone
Tagged: mediaqueries smartphone width
- This topic has 7 replies, 2 voices, and was last updated 8 years, 3 months ago by msummers.
-
AuthorPosts
-
January 19, 2016 at 2:18 pm #176951msummersMember
I am using Genesis 2.2.6 with Outreach Pro on this site -
http://192.185.156.121/~cdmsincc
Once I get the basic layout in place, I begin to build the Media Queries for additional CSS tweaks as needed. These are all put into a custom stylesheet that is enqueued in the functions.php file, and which appears at the bottom of the stylesheet list in the head of the document. In building these queries, I rely heavily on Chrome's developer tools to visualize the layout on different devices, and to test my CSS changes before actually adding them to the media query document. I think this is probably a standard approach.
On the site mentioned above, although the home page looks "normal" in Chrome when set to iPhone 6 emulation (portrait), when I actually use my iPhone6 to visit that page, the entire layout is compressed to about half its width on the left. I can fix that when the page is visualized on my iPhone6 by using this (goofy) media query -
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {body {
width:737px;
}When I again look at this page in Chrome, it's now too wide for the iPhone emulations, but it looks right on my phone.
I might also mention that the page looks OK on Android devices without the goofy media query.
Should I have to do this?
January 20, 2016 at 10:29 am #177023carasmoParticipantNo, you don't have to do this.
The original css for your theme uses break points for common viewport widths and you should use those, keeping your css flexible with max-width and/or percentages for widths.
There are many, many sizes of devices, so the common rule with desktop first CSS is to chose a break point (or two) where different content goes 100% stacks, you remove floats. You can see that all the StudioPress child themes are doing this as of this writing.
January 20, 2016 at 10:47 am #177025msummersMemberThanks for your reply.
Although I didn't show them, I am using the standard breakpoints that are provided with the Outreach theme (max-width 860 and max-width 480). The additional breakpoint I mentioned above is a test iPhone specific breakpoint that I added to try to accommodate the fact that the standard breakpoints give me the half-width display on iPhone only. That is the issue I am trying to address.
January 20, 2016 at 2:15 pm #177035carasmoParticipantYour half-width on phones is also seen when I size my viewport down because horizontal scrollbars are being created due to styles with explicit widths set in custom.css.
If you set a width: 740px outside media queries, they are global to all viewport widths. Use percentages on sizes or use max-width or use both (width:90% / max-width:800px), don't use explicit widths. If you must use exact widths (which you should not) you would create a max-width media query AFTER the global property.
Remove the embedded css:
.site-title a { background: url(http://192.185.156.121/~cdmsincc/wp-content/uploads/2015/12/CDMSlogo.png) no-repeat !important; }
If this was done in some settings of your site, please let me know.
In the custom.css you have urls pointing to logo images that are not there, don't use relative paths.
Then use this CSS (linked below) in your custom.css file, notice the removal of the !important and the explicit widths.
https://gist.github.com/carasmo/0aa2c6ec2c077eb251d2
/* CSS Document */ /* GWS - 12/2015 */ body { background-color: #FFF } h2, h3 { color: #8A2432 } /* Style top matter band */ .gws-top-matter { background-color: #004C46; color: #DDD; height: 26px; font-size: 0.8rem; line-height: 0.8rem; } .gws-top-matter-wrap { max-width: 1140px; margin: 0 auto; overflow: hidden; } .gws-top-matter section { float: left; padding-top: 6px; } .gws-top-matter section.widget { margin-bottom: 0 } /* Resizing site header to accommodate larger logo and description underneath */ header.site-header { min-height: 180px!important; background-image: url(http://192.185.156.121/~cdmsincc/wp-content/uploads/2015/12/header-bk.jpg); background-repeat: repeat-x; background-color: #ECDFCC; border-bottom: 2px solid #004C46; } .site-title a { min-height: 136px; background-image: url(http://192.185.156.121/~cdmsincc/wp-content/uploads/2015/12/CDMSlogo.png); background-size:contain; background-repeat:no-repeat; } .site-header .wrap { padding: 26px 0 } .wrap div.title-area { margin: 0 auto; float: none; width: 49%; } .site-header .widget-area { float: none; padding-top: 14px; max-width: 740px; margin: 0 auto; clear: left; text-align: center; color: #333; font-size: 1.8rem; } /* Slider */ .site-inner { background-color: #EFE3D3 } .outreach-pro-home .site-inner { padding: 0; border-bottom: 2px solid #004C46; } .content #genesis-responsive-slider .flex-control-nav { margin-top: -73px } /* Primary Navigation Menu */ .nav-primary { background-color: transparent; border-bottom: 2px solid #004C46; } .genesis-nav-menu, .genesis-nav-menu a { color: #292B2C } .genesis-nav-menu .current-menu-item > a, .genesis-nav-menu .sub-menu .current-menu-item > a:hover, .genesis-nav-menu a:hover, .genesis-nav-menu li:hover > a { background-color: #DBDCDE; color: #8A2432; } /* Below Slider */ .gws-below-slider-wrap { color: #333; margin: 15px auto; max-width: 1140px; text-align: center; } .home-bottom { background-color: #004c46; padding-top: 15px; } .home-bottom .widget { float: left; margin-left: 2.5641%; width: 31.5769%; } .home-bottom.widget-area section { background-color: #FFF; /*min-height: 250px;*/ text-align: center; padding: 0 10px; } /* Testimonials - Users Speak */ .users-speak { text-align: center; color: #1E1E20; max-width: 35%; margin: 0 auto; background-repeat: no-repeat; background-position: 0 20px; padding-left: 25px; } .users-speak p { font-style: italic } /* 3Col Footer */ .three-col-footer { background-color: #EFEFEF; border-bottom: 1px solid #f1f2f2; } .three-col-footer-wrap { max-width: 1140px; margin: 0 auto; overflow: hidden; background-image: url(http://192.185.156.121/~cdmsincc/wp-content/uploads/2016/01/3col-bkg-minus.png); background-repeat: no-repeat; background-size: contain; padding-top: 5px; position: relative; } .three-col-footer-wrap section { width: 50%; float: left; } .three-col-footer-wrap section #col1 { margin: 10px 0; padding: 4% 10px 0 45.8%; } .three-col-footer-wrap section #col1 p, .three-col-footer-wrap section #col1 h4 { font-style: normal; margin: 0; line-height: 1.2; } .three-col-footer-wrap section #col1 span { font-weight: bold } .three-col-footer-wrap section #col2 p { text-align: center; margin: 16.400% 0 0; } .three-col-footer-wrap section #col3 { padding-top: 90px; padding-left: 15.5%; } .three-col-footer-wrap section #col3 p, .three-col-footer-wrap section #col3 h4 a { font-weight: bold; color: #8A2432; font-size: 1.3rem; margin-top: .5rem; margin-bottom: 0; } .three-col-footer-wrap section #col3 h4 a { font-size: .9rem; font-style: italic; } .three-col-footer-wrap section + section { width: 23.3% } .three-col-footer-wrap section + section + section { border-right: none } a#return { text-decoration: underline } a#return:hover, a#return:focus { text-decoration: none } /*#### MEDIA QUERIES ####*/ @media only screen and (max-width: 860px) { header.site-header .site-title a { background-size: contain; } .home-bottom .wrap { padding: 0 2% } .home-bottom .widget { clear: none!important; margin-left: 1.4%!important; } .users-speak { max-width: 100%; padding: 0 25px; } } /*#############################*/ @media only screen and (max-width: 480px) { nav.nav-primary { background-color: #004C46 } header.site-header .site-title a { background-image: url(http://192.185.156.121/~cdmsincc/wp-content/uploads/2015/12/CDMSlogo-300x74.png); background-size: contain; margin: 0 6.5%!important; display: block!important; min-height: 74px!important; } .header-widget-area section .textwidget { font-size: 1.1rem; text-align: center; /*width: 375px;*/ } .users-speak { max-width: 100%; padding: 0 25px; } .home-bottom .widget { width: 100%!important } div.three-col-footer-wrap { overflow: visible } .three-col-footer-wrap section { width: 100%!important; float: none; border-bottom: 1px solid #FFF; } #col1, #col2, #col3 { width: 100% } #col1 h3 { font-size: 1.0rem } #col3 { padding-top: 10px!important } }
January 20, 2016 at 2:18 pm #177038carasmoParticipantBefore you swap them out, compare and see the differences. Also, I didn't correct other issues. Team Treehouse has good training on CSS.
January 20, 2016 at 2:21 pm #177039carasmoParticipantTry to work without !important and just use greater CSS specificity if you can, it will make CSS modifications at different breakpoints much easier.
January 20, 2016 at 2:27 pm #177041msummersMemberGoodness - that's very kind of you. Thank you so much for this extensive help. I'm sure you are on to something here and will post back with the results.
January 22, 2016 at 1:51 pm #177201msummersMemberOf course, you were right - I was astonished by how many absolute widths had crept into my code. I suppose I put them there early on thinking "I will come back to this and change it" and then forgot to do so. I was able to correct the smartphone display with your modifications and a few more of mine, so thanks again for this!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.