Hey guys below is the CSS code im running on my website to make it more friendly for ipad and phones, i found this code online and do not have profound knowledge of CSS, this was inserted in the additional CSS section of my site. This is only working for my main home page and all other pages do not seem to be working and are appearing very wierd, can anyone help me would be highly appreciated.
Code
@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 {
display: block;
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;
}
.has-header-image .custom-header-media img,
.has-header-video .custom-header-media video,
.has-header-video .custom-header-media iframe,
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
min-height: 1px;
-o-object-fit: unset;
object-fit: unset;
}
.custom-header-media:before {
background: none;
}
body.has-header-image .site-description,
body.has-header-video .site-description {
color: #222;
opacity: 1;
}
.site-branding .wrap {
padding: 0 1em;
}
}
@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;
}
.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 {
display: block;
}
}