Viewing 1 reply thread
You must be logged in to reply to this topic.
Hi,
I’m having some issue with header background on vertical tablet and vertical/portrait mobile,
i’ve set it with transparent background and it works well on computer/tablet
but on mobile the background is set to white.
I can provide you some screenshot if you need.
After watching a bit the css class i saw that the issue is with max-width < 980:
@media (max-width: 979px)
.header_wrapper {
background: #fff;
}
@media (max-width: 979px)
.header_transparency header#header {
background: #fff;
}
So why when my width goes under 980 the bootstrap-responsive.css add these classes?
I even tried to replace those class css with custom css but it didnt work.
What’s wrong there? Is this behave right? I have some wrong configuration in my theme?
Thanks a lot , Hetan
Hello,
The responsive layout uses different css classes from the desktop one. The @media rule is used to check the screen dimensions from where the site is being accessed so it will determine what device is and what layout to display.
This code is interpreted like this:
@media (max-width: 979px)
->for all screens smaller to equal of 980px, execute the css below:
.header_wrapper {background: #fff;}
->set’s header background to white.
If you want to change this, just add this css code into your custom css box:
@media (max-width: 979px){
.header_wrapper {background: rgba(253, 252, 251, 0.03) !Important;}
}
It will overwrite the default style.
Best regards!
You must be logged in to reply to this topic.