What should be really simple is not working at all. I just want to set a div to display none until the width is greater than 980px. However it only works while the screen is at 980px but nothing more or less than that!!
/* Should work while screen is 980px or less */
#media (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
I think you need to check for both min-width and max-width.
Try
/* Should work while screen is 980px or less */
#media screen and (min-width: 1px) and (max-width: 980px) {
.large-screen-hide{
display: none;
}
}
From CSS Media Queries on the Mozilla Developer Network.
u need to set the type of media
#media screen and (max-width:980px){
.large-screen-hide {
display:none;
}
}
Related
If em/% values are used in an non-bootstrap layout they are responsive in bootstrap no matter what text size remains the same and when vw are used they are responsive. What is the reason for this how to make it responsive without media queries.
The .lead class from Bootstrap uses Media Queries so that depending on what the device's screen width is, the font-size property will be a different value
/*---------------------
Media Queries
---------------------*/
/* Desktops */
#media only screen and (min-width: 993px) {
.lead {
font-size: 3.5em;
}
}
/* Tablets */
#media only screen and (min-width: 769px) and (max-width: 992px) {
.lead {
font-size: 3em;
}
}
/* Smartphones Landscape & Portrait */
#media only screen and (max-width: 768px) {
.lead {
font-size: 2em;
}
}
/* Smartphones Portrait */
#media only screen and (max-width: 540px) {
.lead {
font-size: 1em;
}
}
Changing the size of fonts depending on the size of the screen, is one of the most common things that I find myself doing with Media Queries
Sorry, I understood in any given document when percentages are used they are only responsive for padding, margin and other things and text are always unresponsive and they must be changed according to media queries.
Ems are always unresponsive even with padding and margin.
I have past experience of working with foundation. So I started using foundation media queries rules for creating responsive site.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
Here is my problem:
I am trying to hide a menubar in mobiles that is shown in desktop version (like how show-for-small in foundation). So I have defined stylings for mobile inside the media query #media only screen and (max-width: 40em). Surprisingly it is not working . So I have added the following rule before the above mentioned rule, #media only screen { }, then it worked.
I also tried the combination of #media only screen and (min-width:5 em) and (max-width: 40em). It also did not work.
I also have viewport meta tag defined in my page. Can anyone explain me why this is happening so ???
i think the problem maybe related to css specificity ( one command has higher priority)
so what about trying to put
#media only screen and (max-width: 40em)
in the last of your commands
and also inspect element in browser to know if this command is overwrited by other command
this is the most things happen with me when works with bootstrap ,wish this help you
You have to give your element the hide-for-small class so that it won't show up on mobile screens: Know as visibility classes
I'm trying to make my website design responsive.
So far, I've got the following rules:
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
For some reason, the last media query doesn't work. In fact, it completely strips all styles from every element on the page.
I've been looking around and I can't find any hint as to why this is or what I'm doing wrong...
I feel like I'm missing a concept or something... Everyone's talking to me about percentages, and while I'm taking that on board, I'm not seeing how it relates to the media queries not applying the style rules.
Can anyone provide any clarity?
Thanks in advance!
You don't have a closing comment tag.
#media screen and (min-width: 1000px) {
/* styles for screen width 1000px and wider */
}
#media screen and (min-width: 500px)and (max-width: 800px) {
/* styles for screen width between 500px and 800px */
}
Nothing else wrong here.
I am using media query #media all and (max-width:500px) {..} to make site design responsive. It is working fine on my opera mini. But i have not tested it on other other mobile browsers. Will it also work on other mobile browsers or i have to add (max-device-width:500px) in this media query.
max-width is fine enough
/* smaller than 980 */
#media screen and (max-width: 980px) {
your css here
}
/* smaller than 650 */
#media screen and (max-width: 650px) {
your css here
}
/* smaller than 480 */
#media screen and (max-width: 480px) {
your css here
}
I have been using and learning CSS3 a fair bit of late and enjoying its many capabilities. Right now I am wondering if it is possible to setup a CSS rule that assigns a block element width conditionally. The sort of thing I am after - if the screenwidth is less than, say 500px, use a width of 320px otherwise use a width of, say, 80%, of screen size.
Yes, I realize I could do this sort of thing through JavaScript - just wondering if there isn't a more elegant CSS3 approach.
Yes, it is very much possible using CSS media queries - http://www.css3.info/preview/media-queries/
.mydiv {
width: 80%; /* normal case */
}
/* special case if screen width < 500 */
#media all and (max-width: 500px) {
.mydiv {
width: 320px;
}
}
#media only screen and (max-width: 500px) {
// CSS rules go here
}
#media only screen and (min-width: 501px) and (max-width: 959px) {
// CSS rules go here
}
#media only screen and (min-width: 960px) {
// CSS rules go here
}
etc...
From the W3C