I have the following media query which applies the background style to the body successfully, however it does not change the others, any ideas pleople?
#media (min-width: 980px) and (max-width: 1200px) {
body {
background:#F00;
}
.contentsearch.navbar {
margin-left: -475px !important;
top: 200px !important;
width: 950px !important;
}
.contentTabs {
margin-left: -475px !important;
width: 948px !important;
}
.ui-tabs-panel {
width: 948px !important;
}
}
heres the original css for these elements
.contentsearch.navbar {
position:absolute;
top:200px;
width:1170px;
left:50%;
margin-left:-585px;
}
.contentTabs {
border-bottom: 1px solid #AAAAAA;
border-left: 1px solid #AAAAAA;
border-right: 1px solid #AAAAAA;
bottom: 55px;
height: auto !important;
left: 50%;
margin-left: -585px;
position: absolute !important;
top: 241px;
width: 1168px;
}
.ui-tabs-panel {
border-bottom: 1px solid #DDDDDD !important;
border-top: 1px solid #CCCCCC !important;
bottom: -1px !important;
height: auto !important;
overflow: auto;
position: absolute !important;
top: 47px !important;
width: 1168px;
}
Try with this :
#media all and (min-width: 980px) and (max-width: 1200px){
....
}
You forgot declared on what type of screen you want it to be active
#media all and.....
You have :
all
screen
print
handheld
tv
etc..
You have excellent article for this
Without media type it works anyway.
If you resize browser nothing happens?
Original css should be displayed when your screen size has more than 980px, correct?
I have solved the issue, thanks for your responses.
The problem was i was copy and pasting styles from another application, in transit them seem to have picked up some kind of strange formatting/characters, after rewriting them by hand it now works!
Related
I am building a custom .css, but I do not know, how to override a bunch of classes within a media query with "nothing". Means, I do not want this in my output, but also I don't want to delete this from the css as it needs to stay original. I also don't want to copy the whole bunch of classes and write "none" or "unset" behind every single attribute. Is there any solution for this. Thanks a lot.
/*original.css*/
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
}
/*custom.css*/
/*here should be nothing like it wouldn´t even exist in the original*/
You can write as many classes in the media query within the parenthesis.
Here is an example for this
Just define the class above and change as per your requirement as per screen size.
.custom_class1 {
height : 1px;
}
#media only screen and (max-device-width: 720px) {
ol.accord li {
width: 100%;
}
.content {
height: 149px;
width: 50%;
}
ol.accord li h3 {
height: 30px;
width: 100%;
margin: 0;
border-right: none;
border-bottom: 1px solid #fff;
padding: 7px 10px;
}
.custom_class1 {
height:70px;
}
.custom_class2 {
height:70px;
}
}
I have a message bar that is hidden unless the server responds with a message to render something (e.g. "The password and username are invalid."). Then it eases in from the top to display the message.
In latest versions of Chrome, Edge, Safari, and Firefox, this is working fine. In IE, it flies up from the bottom of the browser, across the viewing area, and then mounts where it should be when it is viewable.
This is the Sass that I have. I've been toying with the transform and transition to get the correct results, without affecting other browsers. I not been able to, so looking for suggestions:
#messages {
z-index: 999;
position: fixed;
width: 100%;
.container {
max-width: 890px;
#media (max-width: 992px) and (min-width: 768px) {
max-width: 720px;
}
#media (max-width: 767px) and (min-width: 576px) {
max-width: 510px;
padding-left: 0px;
padding-right: 0px;
}
}
a {
color: #FFF;
font-weight: bold;
}
i {
cursor: pointer;
padding-top: 3px;
}
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-5vh);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
.hide-messages-bar.show-success-messages-bar {
background-color: $green;
transform: translateY(0vh);
padding: 8px 0;
}
.hide-messages-bar.show-error-messages-bar {
background-color: $red;
transform: translateY(0vh);
padding: 8px 0;
}
}
arbuthnott got me pointed in the right direction. It turns out px works as well so I used that instead. Was having a hard time getting % to behave the same as it did in other browsers.
Used this tool to translate vh to px:
https://jsfiddle.net/Dwaaren/j9zahaLL/
And ended up with this:
.hide-messages-bar {
color: #FFF;
position: relative;
top: 105px;
transform: translateY(-22.3px);
transition: transform 0.5s ease-in-out;
box-shadow: 0 1px 6px 2px #333
}
The 0vh on the other two classes apparently wasn't doing anything so left that as is. Now all major browsers perform similarly.
Hi for some reason my responsive CSS is not working, I'm not sure what to change or what to do, but whenever I load my site up on my iPhone and zoom all the way out the site only uses up approx 3/4 of the page, I have no idea why, here's the code in my CSS.
#media (max-width:767px) {
.navbar-custom .nav.navbar-nav {
background-color: rgba(255,255,255,.4);
}
.navbar.navbar-custom.navbar-fixed-top {
margin-bottom: 30px;
}
.tp-banner-container {
padding-top:40px;
}
.page-scroll a.btn-circle {
width: 40px;
height: 40px;
margin-top: 10px;
padding: 7px 0;
border: 2px solid #fff;
border-radius: 50%;
font-size: 20px;
}
}
I've the max width to 767 as that's the width of a iPhone to test it out, but no matter what I seem to change nothing happens.
I want all CSS changes to have a transition. I tried
* { transition: all 1s; }
but it's not working.
Proof: http://jsfiddle.net/Lv3kpyxh/
What am I missing?
Your media query rules are ill-formed. Try this instead:
* {
transition: all 1s;
}
#media only screen and (min-width: 600px) {
.special {
padding: 30px;
border: 1px solid black;
text-align: center;
}
}
#media only screen and (max-width: 600px) {
.special {
padding: 0;
border: 0;
text-align: left;
}
}
The padding value is animated, but if you want the border to animate too, you would be better off changing the second border rule to border: 1px solid transparent;.
Updated fiddle here
I am creating a website using Bootstrap and want to resize the Navbar height when the browser screen is min-width: 268, I am using a media query to do this but for some reason the media query changes the height of the Navbar before the screen has been made smaller, can someone please help, code is below.
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 105px;
}
#media only screen and (min-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}
If you want this style to apply when the width is LESS than 286px, use max-width. Try this:
#media only screen and (max-width: 268px) {
.navbar-inverse {
background-color: #fff;
border-color: transparent;
height: 50px;
}
}