Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Sebastian Graus
633 PointsResponsive site not working properly in iPhone
Hi everyone,
I've been designing this site, starting out with the Start Bootstrap with scrolling one page design. I've changed the heights of the sections to fit the text, and it looks pretty good in desktop version. It also looks great when I look at the site in responsive design mode with the safari developer tool (and when I'm resizing the window). However, when I look at the site with my actual iPhone the heights are off and the text are not contained to the sections. I even did some changes but they don't seem to take place when I refresh the site in my phone. I have cleared all my cache and website data in my phone when trying.
For example, in the phone the service section is being cut off, although the height is set to 160%.
This is the site: http://500stockholm.se/500stockholm/
What should I do? I think I've set the media queries correctly (375px).
Thank you all very much!
2 Answers
Abraham Juliot
47,353 PointsHi there,
These errors can be spotted in chrome devtools device simulator and switching orientations. You set max-width: 375px, but you should use min-width: 375px, unless you intend to overide the initial height of all the sections via a max-width: 375px media query. Also, Using percentage based heights in scrolling-nav.css is causing much of the error becuase the percentage is based on the height of the parent element, namely the body, which in the case of an iphone is small and does not take into account the height needed for the text. If you set the initial height of section to 100%, then on an iphone it will be the height of the iphone's window, and the text will overflow into the next sibling element, unless you set the section's overflow to hidden or scroll, and either will look awkward. Anyhow, the percentage heights in the scrolling-nav.css file are the source of the problem.
You may do one of these quick fixes within the scrolling-nav.css file: [1] delete the html and body css settings there, [2] or leave that, and just delete all the height setting for the sections, including within media queries, which will default the height to auto, [3] or leave all that, and simply add this to the very bottom of the file and the media queries: #page-top section {height: auto !important}
I recommend combining number 2 as best practice, and you may want to set an initial pixel based height of 50% for the image section as the only initial height it will have is the padding-top, which doesn't look good on some screen sizes.
Lastly, on another note, you may want to consider optimizing the jpeg images you're using on the page as they are very costly to the page load/ rendering speed. I recommend, using a much smaller image for smaller screen sizes. I believe Treehouse has an informative course on responsize images in the html topic.
To close, if I may suggest in the future ditching css frameworks. Creating a responsive website without a framework is fairly simple and requires much less debugging. I hope the following articles are useful information.
http://adamkaplan.me/grid/ http://adamkaplan.me/blog/grid-retrospective https://developers.google.com/web/fundamentals/design-and-ui/responsive/
Sebastian Graus
633 PointsThank you very much for your extensive responsive Abraham, it's really helpful. I will go on and do the changes you suggested and come back with the results. Once again, huge thank you!