I want red colour when my screen resolution is between 1250px to 1350px .
Below is my code:
<style>
#media screen and (max-width: 1250px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
Not much magic. You pretty much just write down what you want to do:
<style>
#media screen and (min-width: 1250px) and (max-width: 1350px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
First of all you have write this in external stylesheet, and you can mention
#media screen and (min-width:1250px) and (max-width:1350px)
Request you to trying using this
<style>
#media only screen and (min-width:1250px) and (max-width:1350px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
Related
I do not want to repeat the same property all the time on my CSS.
In my case, I have three media queries in which I change the property of padding of a specific element and after I need to put it as the beginning:
#media (max-width: 1000px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
#media (max-width: 750px){
ul > a{
padding-top: 16px;
padding-bottom: 16px;
}
}
#media (max-width: 500px){
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
}
As you can see, I have to put the same code on the first and on the third one media query and I would like to reduce the amount of lines of my CSS.
I would like to wrap these lines into a variable or something similar:
ul > a{
padding-top: 20px;
padding-bottom: 20px;
}
and use them in the whole CSS each time I need it.
I found that there is an experimental technology to create variables on CSS but that it has not been stabilized yet and it does not have a full browser support.
Thus, is there a method to use more than one line on CSS without repeating them?
Thanks in advance!
Just define the common rule without a media query and then use media queries to override it as necessary, like so:
ul a{
padding:20px 0;
}
#media (max-width:750px){
ul a{
padding:16px 0;
}
}
Alternatively, add min-width to your media queries and create a new one to define all the common rules in, like so:
#media (max-width:500px),(min-width:751px) and (max-width:1000px){
ul a{
padding:20px 0;
}
}
#media (min-width:501px) and (max-width:750px){
ul a{
padding:16px 0;
}
}
You could use one query with min and max width Fiddle, also only li element can be direct child of ul element (i used color instead of margin form demo)
ul a {
color: blue;
}
#media screen and (min-width: 500px) and (max-width: 750px) {
ul a {
color: red;
}
}
<ul>
<li>Lorem</li>
<li>Lorem</li>
</ul>
I cannot figure out why my bootstrap dropdown menu seems to have an extra line on top and line on the bottom--with nothing in them. Granted, I have made my navbar 150px for all resolutions but that doesn't explain the extra padding on the bottom. This is my first bootstrap project and I have searched high and low for an answer to this. You have to narrow the window to less than 767 pixels for the dropdown option to appear.
This is the page: http://www.ashlandlockandsafe.com/index3.html.
In the CSS, I have tried to address it with the following:
#media screen and (max-width: 767px) {
.navbar-header{
height:150px;
}
.navbar-brand, .navbar-nav > li > a {
line-height: 30px;
height: 45px;
padding: 0px;
margin-top:0px;
margin-left:10px;
}
.well {
font-size:2.5em;
text-align:center;
text:#000;
padding:0;
border:#000 solid 4px;
background-image:url(../images/metal.png);
background-image:no-repeat;
background-size:contain;
background-position:center;
}
.carhelp {
margin-top:15px;
}
h1 {
text-align: center;
font-size: 30px;
}
.phonetxt {
font-size:36px;
text-align:center;
}
But it still has what appears to be an extra row on the top and bottom. Any ideas how to address the dropdown itself?
In website, fixed header has a padding .navbar-fixed-top .nav{60px 0px} causing the problem.
so solution is media queries
#media (max-width: 480px) {
.navbar-fixed-top .nav {
padding: 0px 0px;
}
}
so on devices like mobile, it will over-ride the default .navbar-fixed-top .nav selector property.
More information about media-queries
Does anyone know the proper use of media queries for IE? I tried using media queries in my page and in my call to the css file but i still do not see the media query being referenced.
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
Where is the best place to put this media query and what guidelines do i need to follow?
IE 11 and here is my meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You are missing a closing bracket at the end of your query
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
}
but this would be an issue with all browsers, please update your html with your div's if this syntax error is not your issue.
I am using Media Queries given bellow for responsive in Thesis framework in wordpress. But it is not working. I also get help from these stackoverflow answers but still not working.
Responsive site works on desktop but not mobile
responsive media query not working
When I check this query at this http://www.responsinator.com/?url=http%3A%2F%2Fwww.lvticketattorney.com%2F it is working. But when I check it at mobile device it is not working.
Media Queries
#media (max-width: 569px) {
.menu a{font-size:10px;}
.list-left, .list-right{ width:100%; float:left !important;}
.custom #header{ background-size:95%;}
}
#media (max-width: 415px) {
.menu{ border:0 !important;}
.menu li{ width:95%; border-bottom:solid 2px #fff;}
.menu .current a{ border:solid 1px #000;}
#content_box #content{ width:100%;}
#content_box #sidebars{ width:100%;}
.teaser_right, .teaser{ float:left; width:90%;}
.gform_wrapper{ width:100%;}
#attachment_661{ width:100% !important;}
.gform_footer{ width:50%; }
}
#media (max-width: 385px) {
.format_text h1{ font-size:18px;}
.custom #header{ height:90px;}
#box{ width:95%;}
#box img{ height:auto;}
.menu{ margin-top:-10px; border-top:solid 1px #000;}
.format_text p span{ font-size:14px !important;}
.headline_area h1, .headline_area h2, #archive_intro h1{ font-size:18px;}
.wp-image-167, .wp-image-207{ width:100px;}
}
I use this media query #media only screen and (max-width: 740px) { ---- Style--- }. Now it is working. only screen and was missing.
I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)
If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Demo: https://jsfiddle.net/0pmy8usr/
Add this in a separate CSS file and include it after bootstrap.css
UPDATE for Bootstrap 4:
#media(max-width:900px) {
.navbar .navbar-brand {float:none;display: inline-block;}
.navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
.navbar .navbar-nav {float:none !important;}
.nav-item{width:100%;text-align:left;}
.navbar-toggler {display: block !important;}
.navbar-toggleable-sm.collapse {display:none !important}
.navbar-toggleable-sm.collapse.in {display:block !important}
}
Demo: https://jsfiddle.net/mkvhbgnp/3/
In variables.less, change
#grid-float-breakpoint: #screen-sm-min
to
#grid-float-breakpoint: #screen-md-min;
If you need to collapse your navbar in earlier resolution than 768px so you will need to use #media min-width and max-width, and you don't need to start new project for doing that simply create new .css file ( example: custom.css) and inset it under your main bootstrap.css to override its values. and write this code inside it :
CODE:
#media (min-width: 992px) {
.collapse {
display: none !important;
}
}
Also, you can have a look at this post: change bootstrap navbar collapse.
I hope this will give you the solution.
You can also override the bootstrap classes that close the gap. Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
click here for the live demo code
The solution is actually very simple. Use .navbar-expand-lg or .navbar-expand-xl class with <nav> tag.
Example :-
<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>
Thank you all.
I would suggest bringing in bootstrap into your project in lieu of a CDN and simply look for the media query that looks like this:
#media (min-width: 768px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; //...etc.
And change it to:
#media (min-width: 900px) {
.navbar-expand-md {
-ms-flex-flow: row nowrap;
flex-flow: row nowrap; // ...etc.
Or if you are using a CDN, create an override to that specific media query.
If you want it is menu to be collapsable from medium devices
You can directly do by
toggleable="md"
Else you can go for other force collapsable approach by setting sccs/ less of bootstrap.