+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: [Wordpress] Additional CSS problem not working correct. (/showthread.php?tid=5877300)
Additional CSS problem not working correct. - e-Clipse - Aug 23, 2018
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;
}
}RE: Additional CSS problem not working correct. - Jdxo - Aug 23, 2018
You are going to need to show me how it looks so that I/we can help you. Do you have a link or a screenshot of how it should look and how it does look?