Overriding media queries of parent css in wordpress child-theme - html

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;} }

Related

Media queries changes elements that I don't want it to change

I need help about a very specific problem concerning some of my "media queries".
To make text readable on mobiles, I wrote this :
html{font-size: 100%}
for normal devices, and this :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){html{font-size: 190%;}}
for mobile users to be able to read a larger text.
I was really happy because it worked perfectly, and all the elements and texts displayed perfectly.
(Precision: all my font-size / and some of my paddings between elements are sized in "rem" unit.)
I had another div width some properties (but not font-size) on which I used media queries like this:
#media screen and (max-width: 700px){
.ftrsection{
float: none;
/* some other code */
}
The initial code of this div is :
.ftrsection{
float:left
}
but I decided to apply this media queries in other conditions, which are the same that for html{font-size: 190%} :
#media screen and (max-aspect-ratio: 7/8) and (min-height: 1100px){
.ftrsection{
float: none;
/* some other code */
}
}
And I actually can't understand why, but when I apply that previous code, some of my texts are like twice bigger... Can someone help me please ? That's very anoying.
Thank you.

Media Queries Stuck

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.

Including responsive styles in main stylesheet - overriding main styles

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){
}

Setting Breakpoints to respond to screen size using CSS #media

I'm setting breakpoints in css using '#media only screen and (max-width: 500px)'.
When I set it to change colour upon reaching the breakpoint it works:
#media only screen and (max-width: 500px) {#container{color:black;}}
the container div does go black when I resize the browser, however when I set the breakpoint to change the margin of the div the breakpoint is not triggered.
So when I set the query to:
#media only screen and (max-width: 500px) {#container{margin-left: 0px;}}
nothing changes when the screen is resized in exactly the same way as when I resized when testing for colour change.
the main css file sets #container at margin-left; 18% and when this is changed manually to 0px it does shift the document all the way to the left of the viewport
I've tried various different styles and html elements but colour changes seem to be very reliable, they work in pretty much any combination, but resizing divs or repositioning does not seem to work at all. Why might this be?
Answer:
I was putting my #media query at the head of my css file , when I moved it to the foot of the css file it now resized. It leaves the question though, why did it change the colour at the head of the file but not resize?
You can change margins just as reliably as you can background colours through media queries.
See this for example:
http://jsfiddle.net/Q55MC/
#container {background: blue; margin: 50px; width: 200px; height: 200px;}
#media only screen and (max-width: 500px) {
#container{background:black; margin: 0px;}
}
Try creating a demo so that people can have a better idea about what your trying to achieve.
It looks like the 18% style is taking precedence.
Try to override it with this:
#media only screen and (max-width: 500px) {#container{margin-left: 0px !important;}}
Would the #viewport meta declaration help?
Elegantly Resize Your Page With the #viewport CSS Declaration
be aware that this post uses #-viewport when it should just be #viewport

How to target devices smaller than a certain screen size

I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.
Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??
Thanks,
Jordan
You can implement media queries
e.g:
#media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
#media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}
Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries
You need to Use Media Queries to get what you are looking for.
Refer the link to know more about it.
You can apply CSS to a certain device width only:
#media only screen and (max-width: 767px) {
body { background-color: red; }
}
You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.
.phone-section { display: none }
#media only screen and (max-width: 767px) {
.phone-section { display: block }
.desktop-section { display: none }
}
Here are some more examples:
http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml
Screen Sizes:
640x480
800x600
1024x768
1280x1024 (and larger)
CSS media queries for screen sizes