Rather than having one huge responsive.css files. I am including the media queries in the same stylsheet to keep everything together, for example i have wizard.css file, with:
span.crumbsTxt {
font-weight: normal;
font-size: 16px;
line-height: 1.25em;
}
Then at the bottom of the same wizard.css file, i have:
/* col-sm - Small tablets */
#media (min-width: 768px){
span.crumbsTxt {
font-size: 14px;
}
}
The issue i am having is that all my styles from the media queries are overriding my original styles, even when it doesn't hit the small screen media query.
So in this example i am on a large screen, but for some reason its using all my styles from the media query!
I don't want to use !important, but don't understand why its doing this as it's breaking my whole site!
Thanks
EDIT:
Is my media query setup wrong then - what needs to change?
Are my media queries wrong then, what needs to change to avoid my issues? :-
/* col-xs - mobile screens */
#media only screen and (max-width: 767px) {}
/* col-sm - Small tablets */
#media (min-width: 768px) {}
/* col-md - Medium screens */
#media (min-width: 992px) {}
/* col-lg - Large Desktop screens */
#media (min-width: 1250px) {}
Seems that my bootstrap.min.css uses min width as well. Any ideas on how i could change the above media queries to solve the overriding issue i am having?
change min-width to max-width
You can also apply a min-width and max-width
#media only screen
and (min-device-width : 420px)
and (max-device-width : 780px)
Also, keep in mind that if two selectors apply to the same element, the one with higher specificity wins.
#media only screen and (max-width: 780px)
{
.class
{
styles
}
}
When you use this code everything restyles when the screen is SMALLER as 780px.
But when you use min-width everything restyles when the screen is BIGGER as 780px
you are write the min width in your media query and it can not write in max width.so give the max width also after that check.
#media (min-width:800px) and (max-width:767px){
}
Related
I am attempting to utilize media queries to hide or unhide a div in HTML:
<div class="hide-medium hide-large">Test</div>
With the following CSS:
#media screen and (min-width: 994px){
.hide-large{
display:none
}
}
#media screen and (max-width: 993px){
.hide-medium{
display:none
}
}
#media screen and (max-width: 601px){
.hide-small{
display:none
}
}
The div hides properly when the browser is sized accordingly; however when the browser size hits 601px and lower the div still stays hidden. What am I doing incorrectly?
Media queries cascade. That is to say, at 601px your #media screen and (max-width: 601px) media query would correctly take affect, but the #media screen and (max-width: 993px) media query will also take affect, as 601px is smaller than 993px. Thus, the element has both media queries applied. And because your element still has the hide-medium class at a 'small' width, it will still be hidden.
If you don't want this to happen, I'd recommend explicitly setting a min-width on your middle media-query as well:
#media screen and (min-width: 994px) {
.hide-large {
display: none
}
}
#media screen and (max-width: 993px) and (min-width: 602px) {
.hide-medium {
display: none
}
}
#media screen and (max-width: 601px) {
.hide-small {
display: none
}
}
<div class="hide-medium hide-large">Test</div>
It's also important to note that media queries in the same stylesheet are applied top-to-bottom. If you have a 'lower down' media query that has a valid rule for the target element, it will overwrite any valid media queries which are 'higher up'. You can make use off only min-width (mobile-first) or max-width (desktop-first) queries in this regard (without mixing them). This is further explained here.
I have recently been learning about responsive web design. What I am trying to achieve is presented on the images below, one is for how the website should look like on desktop, and the other one is for mobiles devices.
So as you can see, there are four boxes. After clicking the box, in the textbox you will see some text referring to that box. What I have been thinking about is how to deal with this layout. Is it just the Media Queries and different CSS styling depending on the screen resolution? Or should i somehow (jquery?) switch the elements order in the DOM? Im not sure how to handle this. Thanks for any advice!
To expand on #D.Fraga's comment, the css #media rule could be used as follows:
#media screen and (min-width: 480px)
/* css for large device */
/* */
}
#media screen and (max-width: 480px) {
/* css for small device */
/* */
}
You have 2 sets of css, one for rendering larger devices, the other for smaller.
You may also considering using javascript screen.width with some sort of framework (i.e. angularjs) to dynamically render DOM elements based on screen size (though I highly recommend the former).
This can be solved with css only:
#media (max-width: 420px){
/* Your Code */
}
Study #media of CSS
If you use these media queries for different screen views, maybe your problem will be solved.
Media query for large devices like laptops, desktops with screen size 1025px to 1280px
#media (min-width: 1025px) and (max-width: 1280px) {
//Your css here
}
Media query for tablets, mobile (Landscape Layout) with screen size 481px to 767px
#media (min-width: 481px) and (max-width: 767px) {
//Your css here
}
Media query for smartphone mobile (Portrait Layout) with screen size 320px to 479px
#media (min-width: 320px) and (max-width: 480px) {
// Your css here
}
With twitter bootstrap i applied
#media only screen and (min-width : 768px){
}
but this media query is working on all other width values too, such as 992px & 1200px.
Any solution?
1)Please check whether you have included the meta tag in the head section of your HTML document as
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If this line is not present then none of your media query would work.
2) If you override bootstrap break points in your style sheet make sure your stylesheet is linked to your application properly.
3)understanding how min-width and max-width works will help you. If you are trying some wrong combinations, results may be weird :)
#media (min-width:480px) {}
The styles inside this media query would apply only if your viewport is minimum 480px or wider than that.
#media (max-width:767px){}
The styles inside this media query would apply to your viewport only upto 767px. For any resolution higher than 767px our styles won't be applied.
#media screen
This tells that this particular styles are only applicable to screen and not for print,projection or handheld. So #media screen or #media only screen wouldn't harm your media queries much.
These are some of my tips to troubleshoot media queries. Hope this would help you resolve your issue.
Change media Query to
#media screen and (min-width: 768px) and (max-width: 900px) {
}
Or any size between you want.
For more Details Refer This link.
You can use max-width. when screen regulation is maximum 992px, then it will work.
#media only screen and (max-width : 992px){
/*your styles for Tab device*/
}
You can use max-width. when screen regulation is maximum 767px, then it will work.
#media only screen and (max-width : 767px){
/*your styles for mobile device*/
}
Got it working now.
Mobile with max only then parts from to and above 1200 is reading default.
#media (max-width: 640px) {
}
#media (min-width:640px) and (max-width: 768px) {
}
#media (min-width: 768px) and (max-width:992px){
}
#media (min-width: 992px) and (max-width:1200px) {
}
i hope this may work for you
Please Define it in your style.css not in bootstrap
#media (min-width:768px)
{
}
I want to create a child-theme of a responsive wordpress-theme. The parent theme's css defines somes media queries like:
#media screen and (max-width: 1000px) { /* a bunch of changes */ }
Now let's say I would like the breakpoint to be at 900px instead of 1000px. Is there any way to easily override this in my child-theme's css?
JoshC is absolutely correct.
Probably you do not understand the idea - media query is nost some kind of rule like in css. This is more glogal understanding.
Let's say:
you have media query in main theme
#media screen and (max-width: 1000px) { #main{color:#000;} }
You set div with ID main to have text color BLACK but only if maximum browser width is not more then 1000px - (max-width: 1000px)
Wherever you use this query - it will work same way.
What you need to specify is the stuff inside, for example to make the following more important use:
#media screen and (max-width: 1000px) { #main{color:#000 !important;} }
I'm working with Media screens for the first time and They don't quite seem to be working the way they're supposed too....
#media only screen and (max-width : 320px) {
all the css stylings within here and it shows up as this as it's supposed to.
#media only screen and (max-width : 321px) {
all css stylings that i place in here don't apply to the page when the width goes beyond 321 px. which isn't supposed to happen.... for example if i were to change any text color nothing would end up changing.
thanks in advance for any help :)
The CSS you write in this media query will be applied to the screen which has width less than 321px;
#media only screen and (max-width : 321px) {
if you want to apply the same CSS when you resize it beyond 321px then you need to increase the width as per your requirements -
#media screen and (max-width: 700px){
You need to write Media Query to a class or element as -
#media screen and (max-width: 700px){
body{
font-size:20px;
color:red;
}
}
Demo Here