Responsive header problems
-
Hi, I have tried all code posted here to solve the problem with the header and the way it shows the logo in mobile devices. The problem is the same it was posted by other users: In mobile devices or resizing the screen in PC, the logo keeps its size. Some code fixes partially the problem but created a white gap below the logo. Another code successfully resize the logo but does not keep proportionality.
I have played with this code (different posts, same result):
————–
@media only screen and (max-width: 768px)
#logo-image {
float: none!important;
margin: 10px 0!important;
min-width: 138% !important;
display: inline-block;
}———–
@media only screen and (max-width: 768px)
#logo-image {
width: 960px !important;
max-width: 133%;
}————–
.custom-header {
padding: 45px 20px 115px 0px!important;
position: relative;
min-height: 125px;
background: url(xxx) top center no-repeat;
border-bottom: 0;
}
—————
.custom-header {
background-size: 100% 100% !important;
}
————–
#tagline {
display: none;
}.custom-header {
background-size: 100% 100%;
}etc.etc.
Any advice?
Thanks
- The topic ‘Responsive header problems’ is closed to new replies.