I have a problem when I use media query in css3: without screen, meida query doesn't work.
Here is code:
.side-menu {
position: fixed;
...
display: none;
margin-right: 0;
#media screen and (min-width: #screen-xs) {
display: block;
}
#media and (min-width: #screen-md) {
right: 8.1%;
}
}
Problem: the first media query works and the seconds doesn't. If I remove the screen and the first doesn't work either.
SO, could anyone help me?
You should remove the and in this line:
#media and (min-width: #screen-md)
To become:
#media (min-width: #screen-md)
Related
I have problem that i have cart main div element and problem is to make mobile responsive correctly, in laptop ( width:1024) or less working correctly, because i using :
#media (min-width: 801px)
#cart-modal {
left: 59%;
}
but in large screen ( width like : 1920px ) i used :
#media only screen and (min-width: 801px) and (max-width: 1920px)
#cart-modal {
left: 69%;
width: 600px;
}
not working !
I want just when i open large screen this cart should be left:69% and when i open laptop left:59%
Please Help me, Thanks !
You've set both queries min-width the same. Now, when you open page on small screen both queries are applied but the second is executed because it's more up to date.
The first one should be something like this:
#media (min-width: 801px) and (max-width: 1920px)
#cart-modal {
left: 59%;
}
And the second one should be:
#media only screen and (min-width: 1920px)
#cart-modal {
left: 69%;
width: 600px;
}
See the MDN documentation for properly constructing #media queries. In this case, your queries are missing parent braces { ... }, and should look like this:
#media (min-width: 801px) {
#cart-modal {
left: 59%;
}
}
#media (min-width: 1920px) {
#cart-modal {
left: 69%;
width: 600px;
}
}
I want to achieve if the screen is pc user width:880px; if it is mobile use width: inherit;, how do i get this using the #media query.
#media all and (width: 880px) {
.colm_6_container {
width: inherit;
}
}
My div class is 'colm_6_container'.
//ipad and desktop
#media screen and (min-width: 768px) {
.colm_6_container{
width: 880px;
}
}
This site uses the style sheet http://staging.taxrusaccounting.com.au/wp-content/themes/bones-new/library/css/style.css which contains the media query:
#media only screen and (min-width: 768px) {
.nav li {
float: left;
position: relative;
}
}
However, the .nav li rule is not present in Chrome Inspector when the viewport is wider than 768px.
Help appreciated.
Found a typo
#media screen and (max-width: 600px} {
should be:
#media screen and (max-width: 600px) {
So I am trying to make my website responsive, but when I target screens larger than 1600px the css is not working. Do I have any typo in my css code? Thank you.
#media (max-width:900px) and (min-width:600px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
#media (max-width:1250px) and (min-width:900px) {
ul.news li {
width: 100%;
margin-top: 3px;
}
}
/* THIS ONE IS NOT WORKING */
#media only screen and (min-width: 1600px) and (max-width: 2600px) {
ul.news li {
width: 100%!important;
color: red!important;
}
}
You can refer to this Media Query and write your css in this media query dimensions
/*=====Media Query Css Start======*/
#media all and (max-width:1920px){
}
#media all and (max-width:1600px){
}
#media all and (max-width:1366px){
}
#media all and (max-width:1280px){
}
#media all and (max-width:1024px){
}
#media all and (max-width:960px){
}
#media screen and (max-width:767px){
}
#media screen and (max-width:480px){
}
/*=====Media Query Css End======*/
I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}