Twenty Seventeen Portrait Header Displays Wrong
-
Hello. I have been struggling with my header image displaying correctly. First it was the mobile header that was cutoff. Now, I have fixed the mobile header but the header is now cutoff on desktop. Here is the code I currently have:
.custom-header-media:before {
background: none;
}@media screen and (max-width: 480px) {
.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header { height: auto;
left: 0;
max-width: 100%;
min-height: 0;
-o-object-fit: unset;
object-fit: unset;
position: relative;
-ms-transform: none;
-moz-transform: none;
-webkit-transform: none;
transform: none;
}.has-header-image.twentyseventeen-front-page .site-branding,
.has-header-video.twentyseventeen-front-page .site-branding,
.has-header-image.home.blog .site-branding,
.has-header-video.home.blog .site-branding,
.custom-header-media,
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe {
position: static;
}
}
@media screen and (max-width: 768px) {
.custom-header-media,
.has-header-image .custom-header-media img {
display: block;
position: static;
}.has-header-image.home.blog .custom-header {
height: auto;
}.has-header-image.home.blog .site-branding {
left: 0;
position: absolute;
top: 0;
}
}.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 800px;
}@media only screen and (max-width:768px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 400px;
}
}@media only screen and (max-width:480px) {
.custom-header,
.has-header-image.twentyseventeen-front-page .custom-header {
height: 200px;
}
}#top-menu{
text-align:center;
}Here is a screenshot:
https://pasteboard.co/HFpRf38.png
Maybe it is because I am using a 27″ monitor? Any ideas? Thank you.
The page I need help with: [log in to see the link]
- The topic ‘Twenty Seventeen Portrait Header Displays Wrong’ is closed to new replies.