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

Posted by Matthew Mariner
Matthew Mariner
17,666 Points

[Responsive Design] When viewing my website on an Iphone 5/6, the text on photos cuts off randomly

Hey guys, I currently own an Galaxy S6 and iphone 5c. When I view my website on the Android everything looks responsive (besides the stuff I have to finish) but when I look at the website on my iPhone I get this terrible choppy cutoff on the banner below the Nav.

http://imgur.com/wIg2TUZ

I go to the Chrome Dev tools on my website and when I choose the Iphone 4/5/6 preview, it doesnt show up. Yet on my iPhone, and friends iPhone's this has shown up repeatedly. This happens on all the pages of my website. (Matthewmariner.me)

Help?

Thanks Guys, Matthew Mariner.

PS: I hope it's not against the rules to link to Imgur/My Portfolio. If it is im sorry.

2 Answers

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

Do you have a link to your code? What sort of properties are you using to display the text? I suspect it will be some thing not working so well on iOS.

Matthew Mariner
Matthew Mariner
17,666 Points

Hey Pete! Thanks for the reply.

/* For the first part [Building] */
h4 {
    line-height: 7.8;
    color: white;
    text-align: center;
    font-size: 2.5rem;
    margin: 8% -5px 0 0;
    -moz-opacity: .80;
    -khtml-opacity: .8;
    opacity: .8;
    text-shadow: 0 0 80px rgba(0,0,0,1),0px 0 70px rgba(0,0,0,1),0px 0 60px rgba(0,0,0,1),0px 0 50px rgba(0,0,0,1),0px 0 40px rgba(0,0,0,1),0px 0 30px rgba(0,0,0,1); 
}
/* For the smaller text [Specializing in] */

h6 {
    color: white;
    margin: -7.0rem 0 0;
    padding-bottom: 1rem;
    font-size: 1.25em;
    text-align: center;
    -moz-opacity: .80;
    -khtml-opacity: .8;
    opacity: .8;
    background-color: -moz-opacity:.80;
    -khtml-opacity: .8;
    opacity: .8;
    text-shadow: 0 0 80px rgba(0,0,0,1),0px 0 70px rgba(0,0,0,1),0px 0 60px rgba(0,0,0,1),0px 0 50px rgba(0,0,0,1),0px 0 40px rgba(0,0,0,1),0px 0 30px rgba(0,0,0,1);
}

and for media query

@media screen and (max-width: 660px)
h6 {
    font-size: 1.25rem;
    margin: 0;
}
h6 {
    color: white;
    margin: -7.0rem 0 0;
    padding-bottom: 1rem;
    font-size: 1.25em;
    text-align: center;
    -moz-opacity: .80;
    -khtml-opacity: .8;
    opacity: .8;
    background-color: -moz-opacity:.80;
    -khtml-opacity: .8;
    opacity: .8;
    text-shadow: 0 0 80px rgba(0,0,0,1),0px 0 70px rgba(0,0,0,1),0px 0 60px rgba(0,0,0,1),0px 0 50px rgba(0,0,0,1),0px 0 40px rgba(0,0,0,1),0px 0 30px rgba(0,0,0,1);
}
Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

I cannot test it right now, but there may be an issue with the background-color property for your h6. It looks like you are trying to set background-color: but not specifying a color. Instead, you are jumping right into your next property: -moz-opacity: .80 (which you have listed twice in each block of code you posted...but should only have listed once in each). Again, I cannot test if this solves your problem as I do not have an iPhone here at work.