Community Forums › Forums › Archived Forums › Design Tips and Tricks › Responsive breakpoints work on desktop but on on small devices
- This topic has 2 replies, 2 voices, and was last updated 10 years, 10 months ago by Ben Siegfried.
-
AuthorPosts
-
July 3, 2013 at 3:30 pm #49065Ben SiegfriedMember
I have a perplexing problem I can't figure out. The site is built on Executive theme and is responsive. The breakpoints work great when resizing your desktop browser or emulator but when you view it on an an actual device (I have iPhone 5 only) the breakpoints don't work. I've tried giving !important to some but that didn't help. I learned more about this issue using Safari's Web Inspector that Apple iOS6 has, it's really cool to use because you can inspect CSS change live as you make them without refreshing a browser. Anyway, this is how I realized that the breakpoint CSS wasn't being applied because when I applied some of the same CSS in iPhone Web Inspector they worked, and then I checked the style.css file and the changes I made were the same there, so this is why I know for some strange reason the CSS breakpoints are not applying, even when I have given !important. I shouldn't have to give !important to them anyway. I did make some changes to the Executive homepage but tech support here has already said that the changes I made look fine—again the changes I made and the responsive design works great when you view it in your desktop browser resizing that, but on an actual device the breakpoints don't work. I am baffled by this. Tech support here looked at the site on their Droid and said the same thing, so iPhone 5 and Droid (not sure which) is having the same thing happen which is basically desktop CSS never listening to any breakpoint. Naughty breakpoints! Can some of you view this site on your smartphone or tablet and tell me what you see and compare what you see with resizing your desktop? Also, if you're a whiz at solving a problem like this I would love to hear your solution too! Meanwhile, I'll keep trying to figure it out. The site link is below:
http://siegfriedmedia.com/gmse/July 3, 2013 at 6:21 pm #49099JeremyMemberCheck it out on my iPhone5. The site is responsive and the CSS3 media queries (breakpoints) are working.
I suggest you change the 1,2,3,4 section on the homepage as it's the only part not responding well.
If you want to say thanks Follow me on Twitter | My Website
July 3, 2013 at 6:37 pm #49101Ben SiegfriedMemberThe first block of text under the slider should be wider and shorter, less margin or padding on either side. Guaranteed you didn't see it this way. It responding but not with the correct width in percentage.
The 1,2,3,4 should be top-bottom not left to right. Again, not responding with the correct width in percentage.
The block below that the h2 is ok but the button is squeezed to the right of the paragraph when the button should be underneath the paragraph and be about 70% wide. Again, not responding with the correct width in percentage.
Everything else below these first three blocks are perfect.
The way the CSS is set up in the style.css is not what you are seeing. I'm certain of that. If you have an iPhone 5 then plug it into your desktop and open Safari Web Inspector and drill down to the elements… the percentages should be 100% and they are not, the margins should be "0" but they are not… BUT, they are in the style.css file!!!
You can make them width: 100% in Apple Web Inspector and they will show live in the iPhone 5. This is how I discovered it isn't working correctly. All other Developer tools don't give you this "live" inspector proof. It is driving me crazy why it won't apply. If you don't know what Safari Web Inspector is then go here and take a look: http://webdesign.tutsplus.com/tutorials/workflow-tutorials/quick-tip-using-web-inspector-to-debug-mobile-safari/
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.