When I refresh my website on the phone my responsive design (menu bar) is not working. Not working like disappears... It's just gone.
Only menu bar.
So here is my media query code:
#media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
background: black;
}
}
Maybe I should add JavaScript?
Help!!
It's the display none on line 224 in your css code. Remove it and you should be good.
#cssmenu > ul {
display: none;
}
Related
File input.txt has following:
.classA,.classB .class1{color:blue}
#media only screen and (max-width: 500px){.class1 .classA,.class2,.class3,.class4 .classB{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class1 .classA{margin-right:0}.class1 .classB{margin-right:2%}.class2 .classC{margin-right:2}}
Expected result:
.classA{color:blue}
.classB .class1{color:blue}
#media only screen and (max-width: 500px){.class1 .classA{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class2{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class3{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class4 .classB{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class1 .classA{margin-right:0}}
#media only screen and (max-width: 500px){.class1 .classB{margin-right:2%}}
#media only screen and (max-width: 500px){.class2 .classC{margin-right:2}}
How to ungroup css selectors?
awk '
gsub(/{/,"&")==1 && gsub(/}/,"&")==1{
split($0,arr1,"[}{]")
num1=split(arr1[1],arr2,",")
for(i=1;i<=num1;i++){
print arr2[i]"{"arr1[2]"}"
}
next
}
gsub(/{/,"&")==gsub(/}/,"&") && gsub(/{/,"&")>1{
num2=split($0,arr3,"{")
num3=split(arr3[2],arr4,",")
for(i=1;i<=num3;i++){
print arr3[1]"{"arr4[i]"{"arr3[num2]
}
}
' input.txt
It gives following result which is not expected:
.classA{color:blue}
.classB .class1{color:blue}
#media only screen and (max-width: 500px){.class1 .classA{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class2{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class3{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class4 .classB{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class1 .classA{margin-right:2}}
How to solve this using macOS awk (POSIX)?
Something like setting FS to split on { and } should work fine as long as each definition is in a single line:
awk -F '[{}]' '
NF == 3 {
n = split($1,arr,",")
for (i = 1; i <= n; i++)
print arr[i] "{" $2 "}"
next
}
NF > 3 {
for (f = 2; f < NF-2; f += 2) {
n = split($f,arr,",")
for (i = 1; i <= n; i++)
print $1 "{" arr[i] "{" $(f+1) "}}"
}
next
}
'
.classA{color:blue}
.classB .class1{color:blue}
#media only screen and (max-width: 500px){.class1 .classA{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class2{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class3{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class4 .classB{background-image:url("1.png")}}
#media only screen and (max-width: 500px){.class1 .classA{margin-right:0}}
#media only screen and (max-width: 500px){.class1 .classB{margin-right:2%}}
#media only screen and (max-width: 500px){.class2 .classC{margin-right:2}}
AdminLTE 2.4.3 Demo: https://adminlte.io/themes/AdminLTE/index2.html
I'd like to collapse the left side bar but not the top nav bar when clicking the collapse icon.
I've played around with it but can't seem to find an easy solution for this. Because the collapse function is applied on the <body> tag, I'm not sure how to get around it.
For instance, I'd like it to collapse like this:
Add these styles
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
z-index: 1001;
position: relative;
color: white;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-mini {
display: none;
}
}
#media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-header .logo>.logo-lg {
display: block;
}
}
I was commenting these code at bootstrap.css and my page is now not responsive. But my navbar still responsive. how to disable that?
/*#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}*/
Follow Bootstrap's official doc.
Bootstrap made a non-responsive.css template to disable responsiveness for your template. Take a look at this documentation: http://getbootstrap.com/getting-started/#disable-responsive
Example: http://getbootstrap.com/examples/non-responsive
But I see you want to do it your own way, so you could try this:
#media (min-width: 768px) {
.container, .navbar {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container, .navbar {
width: 970px !important;
}
}
#media (min-width: 1200px) {
.container, .navbar {
width: 1170px !important;
}
}
Note that the code above will only apply to the classes container and navbar. There are other components/classes that should have static widths and heights. So I would recommend you to take a look at the example above.
Must the Twitter Bootstrap breakpoints for media queries be used top down or bottom up and when to define max-width definitions - before or after the min-width definitions? I seem to not get the answer from the tb-stylesheet. When using these breakpoints with my own stylesheets it appears the ordering matters because i encouter definition extinctions or ignorance.
I required to take care for device withs < 768 (which is the last breakpoint for *-xs definitions). I must take care for withs 320px, 480px and 600px and am trying to construct a reliable processing order. These are my current definitions which appear to override each other at some point.
/* lg and up */
#media (min-width: 1200px)
/* md only */
#media (min-width: 992px) and (max-width: 1199px)
/* md and up */
#media (min-width: 992px)
/* sm only */
#media (min-width: 768px) and (max-width: 991px)
/* sm and up */
#media screen and (min-width: 768px)
/* xs only */
#media (min-width: 767px)
#media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
#media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
#media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
#media screen and (min-width: 320px)
#media screen and (max-width: 320px)
/* e.g. Blackberry */
#media screen and (max-width: 349px)
#media screen and (max-width: 479px)
#media screen and (max-width: 567px)
#media screen and (max-width: 991px)
Somebody can clarify the correct order to prevent definition extinction?
CSS cascade rules apply to media queries so, if you want to override a rule with a media query, you need to make sure that the media query contains a rule with the identical selectors (or selectors with more specificity) and that it is loaded after the rule you want to override.
Same applies when you have multiple media queries. The cascade order along with rules for specificity and inheritance will dictate whether the media query is applied. Take for example:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
Each of the selectors above are identical so they have the same specificity, but because of the cascade order, the background will never be the tomato color. If the body is 600 or more pixel wide, the rule for making the background tomato will be overridden by the last rule which also applies because 600px is also wider than 400px.
If you reorder the rules as follows:
body {
background-color: teal;
}
#media (min-width: 400px) {
body {
background-color: yellowgreen;
}
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
Now, the body background will be teal, when the body is less than 400px wide. It will be yellowgreen when the body is 400px - 599px and it will be tomato, when the background is 600px wide or greater.
Of course, you can use max-width too. For example, if you had the following order, the limit on the width at 599px for the yellowgreen rule would ensure that that rule didn't apply once the body was 600px or more:
body {
background-color: teal;
}
#media (min-width: 600px) {
body {
background-color: tomato;
}
}
#media (min-width: 400px) and (max-width: 599px) {
body {
background-color: yellowgreen;
}
}
So, for the TL;DR version, think mobile first. Organize your stylesheets with your base styles define for your smallest devices. Then order your media queries from the next smallest device sizes and up such that the largest devices you want to support are last.
And, don't forget to make sure that the rules in your media queries use selectors are identical to or have more specificity than the rule you want to override.
I could use media queries to specify a certain width for the different display styles (xs,sm,md,lg) but then I would have to repeat the widths that are part of the bootstrap media queries
#media (min-width: 768px) {
img {
width: 20%;
}
}
Question is: Can I maybe do this more DRY - without repeating the numbers?
My first thought was:
img.visible-xs {
width: 20%;
}
But apparently that class does not apply.
Any idea how to do this without using another set of media queries?
This can be done with less/sass mixins. E.g. with less just define
#screen-xs: ~"only screen and (max-width: 767px)";
#screen-sm: ~"only screen and (min-width: 767px) and (max-width: 991px)";
#screen-md: ~"only screen and (min-width: 992px) and (max-width: 1199px)";
#screen-lg: ~"only screen and (min-width: 1200px)";
and then you can use it like this
img {
#media #screen-xs {
width: 20%;
}
}