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 Amanda Bater
Amanda Bater
7,686 Points

Browser inconsistancies!! Help!

I've been learning mostly html and css, and have been building a website as a personal project to help practise. I'm in the final stages now and am trying to iron out inconsistancies.

My main problems so far are that when my website is viewed on Safari on full screen, the top part of the website disappears! There's a div called "banner", and this whole part disappears whenever the window is resized to be more than 1024px wide. Has anyone else had this, or does anyone know why it happens? Could it be to do with my media queries for that screen size?

A similar thing happens in Firefox, but it's just the part with the image, it moves across so it starts in the centre of the screen, leaving a big expanse of white to the left. Again, only when screen size is 1024px or wider.

Sorry for the long post, I'd be really grateful if anyone knew how to fix this at all!! I don't even know where to begin! Here is the code snapshot if that helps:

http://w.trhou.se/2lf6tspthx

Thanks!

Vince Leung
Vince Leung
4,730 Points

Sounds like it could be something with media query, but maybe past your code onto codepen (http://codepen.io), so its easier for us to analyze visually.

Thanks

5 Answers

Brian Steele
Brian Steele
23,060 Points

Okay, so setting a min-height on your header solved the issue for me Safari. Appears that the video element is not setting height, so the header is collapsing. Also, if you set the min-height, make sure to coordinate with your media-queries that are hiding the video (remove the min-height at that point) so that the image and nav show up correctly.

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

Hi Brian, thanks for taking a look. So in the media query for min-width 1025px I've added a min-height of 100%. When I start to make the browser window wider the header disappears at first, then as it's made slightly wider it reappears, except the video is cropped. Have I done this incorrectly? Is it okay to set the min-height as a percentage? See below for what I have done:

@media (min-width: 1025px) {

.main-image {
  visibility: hidden;
}

.video-loop {
  visibility: visible;
}

header {
  min-height: 100%;
}

.name-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: absolute;
  bottom: 20px;
}

.contact-info {
  width: 800px;
}

.name {
  padding-left: 5%;
}

.main-nav {
  padding-right: 5%;
}

.about {
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;

}

.showreel {
  max-width: 50%;
  margin-left:40px; 
}

.info {
  max-width: 40%;
  margin-right: 40px;
  text-align: center;
}

}

Also, here is a link to the code on Codepen, but none of the image or video files are uploaded, so it doesn't display properly anyway.

http://codepen.io/ajbater7/pen/pboYBX

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

Not sure if anyone is still following this or not...have managed to smooth things out in Firefox but still having the same problem of the main-header disappearing in Safari when browser is wider than 1024px. Can't understand why everything is until the browser is made wider!

Brian Steele
Brian Steele
23,060 Points

Hi Amanda, height as a percentage always feels a little wonky to me. I haven't had any time to take a look at the files today, but I will do so again soon. One suggestion is to play with the settings within the dev tools. Gives you live feedback on the changes you're making and how it will affect the site. Granted, Chrome dev tools are the best (in my opinion) and you'll be working specifically in Safari, but it should help. If you haven't used or enabled them in Safari, see below for a primer.

https://developer.apple.com/safari/tools/

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

Hi Brian, thanks for your help, I've just enabled the dev tools in Safari so will be playing around with that today. Looks like all the elements that are missing have a height of zero, so I think that's got to be it! Setting the header height to 100% didn't make any difference in Safari anyway and made Firefox look wrong again, so will continue to play around with this! Thanks again.

Amanda Bater
Amanda Bater
7,686 Points
Amanda Bater
Amanda Bater
7,686 Points

If anyone is still following this, it is now resolved! I had written:

.video-loop {
  object-fit: cover;
  width: 100%;
  height: 100%
  display: none;
}

I removed the height: 100% property and for some reason this fixed it. It seems Safari had an issue with both the height and the width being set to 100%, I don't fully understand why but I'm just glad it's fixed!