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

CSS

Gary Hurd
Gary Hurd
17,533 Points
Posted by Gary Hurd
Gary Hurd
17,533 Points

Designed site, looks great on desktop and laptop, and when I adjust screen on those, responds perfectly BUT when I look

when I look at the site on ipad or iphone, its jacked up. Anyone have any ideas on how to correct? I have spent yesterday and today tweaking the media queries and NOTHING! I am lost and getting twerked.

I have images as backgrounds for my <section> tags and the images are what are not laying out right in the tablet and phone.

15 Answers

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

ok first of all the image is huge. Did you notice everything moving as you adjusted the screen? you have width sizes. one of the ways to fix it is with @media screen css styles for multiple screen sizes. You can apply different layout option based upon device size. This is best for getting a total customizes look for every device.

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Really hard to do with nothing to go on. Is the site live, or can you put the code on Codepen and link it over here?

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

sorry I quess that would have helped.

Peter Hatzer
Peter Hatzer
20,837 Points
Peter Hatzer
Peter Hatzer
20,837 Points

Hi Gary I had quick look your website your going to need to take the height off this is causing your text to hide and get jacked up.

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

take the height off of what? If I remove the height then everything is squished together.

Peter Hatzer
Peter Hatzer
20,837 Points
Peter Hatzer
Peter Hatzer
20,837 Points

I messed around there wee bit more just take the height off where you have text. I would also use a different color than blue for you images background. Also is the .imgtext ment to be where it is?

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

okay, the text on top of the images are placed in different areas. I did not want the text to be in the same location for all images. I think if I can figure out why the images are not appearing properly, then the text will render like the regular site. The site is just simply a scrolling site, couple of different sections, its not a parallax site, just a simple scrolling site.

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

you should always start with the mobile design first. Built from simple to complicated. Otherwise you have to use percent calculations

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

Hey Charles, in all honesty I did that, and I had my browser to the screen size and everything was going great until i uploaded to my hosting site, then all went to heck

this is why i am perplexed and irratated

Charles Gray
Charles Gray
19,470 Points
Charles Gray
Charles Gray
19,470 Points

OK keep a clear mind and stay calm. what kind of web hosting site did you use? Is your site online?

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

my hosting site is ipage. let me see if I can make the image smaller, i thought that is what the problem is. I will resize and see i that helps. I appreciate your help. I will send you a message tomorrow when I resize. thank you

Gary Hurd
Gary Hurd
17,533 Points
Gary Hurd
Gary Hurd
17,533 Points

Charles, I got the site to layout properly. Thank you so much for your help.