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 Caleb Spindler
Caleb Spindler
11,397 Points

CSS appearing differently on Mac Web Browsers (Chrome and Safari) than on iPhone 6 browsers (Chrome and Safari). Help.

For some reason, when I launched my portfolio, when I open it on my iPhone, the background of the header is looking grayed out. This does not happen when I view it on my MacBook's browser.

Here is my CSS:

.main-header {
  padding-top: 200px;
  height: 700px;
  background: linear-gradient(#fff, transparent 150%),
              linear-gradient(0deg, #fff, transparent),
              #fff url('../img/background.jpg') no-repeat center;
  background-size: cover;
  color: #878787;
  text-align: center;
}
Caleb Spindler
Caleb Spindler
11,397 Points

I have done a lot of Googling today and have learned how to center my text in the .main-header (horizontally and vertically) no matter what the size of the browser viewport is. 

.main-header {
   padding-top: 35vh;
   height: 100vh;
}

This has helped a lot with the aesthetics of my site, but the background is still looking gray on iOS devices. Therefore, I set up a temporary media query that removes the img if the browser is smaller than 600px. This is helping for now. Hopefully I come across a better fix that allows this background to work on iOS devices.

1 Answer

Brice Roberts
Brice Roberts
22,415 Points
Brice Roberts
Brice Roberts
22,415 Points

You will learn about this more as you go on, but what you are experiencing is caused my the resolutions of the two devices. You are setting the header to a fixed height of 200px, but 200px is displayed much different at a lower screen density like a phone, than it is on a laptop.

You will learn how to correct this in later courses, with dynamic settings for your CSS code. Just keep going!

Caleb Spindler
Caleb Spindler
11,397 Points

Thanks for responding, Brice. And thanks for the encouragement! That is very interesting. It seemed to be fine when I would check my site with different resolutions with Chrome developer tools. But I guess it's just the difference between a "tool" and an actual device?