I am creating media queries for a page but I'm having a problem in getting them to break at exactly the points specified in my media queries.
For example I have:
#media all and (max-width:1000px) {
header nav ul.nav_items li a {
padding:15px 10px 15px;
}
}
But when I use Chrome and open the dev tools, and observe the viewport/width of the browser, the CSS rules take effect at somewhere around 1226px. Why aren't the CSS rules being applied at exactly 1000px?
Here is a jsfiddle of my HTML/CSS: https://jsfiddle.net/at68m0zp/
By moving the media query to the end of your CSS file, you will make it override the set values. The later something appears (and the more specific it gets) the more preference it receives. Because your query is at the start of the file, any changes to your header nav's display property later does not get applied. Please not that media queries do not increase specificity or get any special treatment, they just get ignored until they are in the range defined by them.
So there is probably a snippet later in your file with a max-width of, say, 1000px. Because it comes after your 900px one but the screen size makes both valid, the 1000px one takes effect.
I had a snippet with the changes but because you posted your entire HTML and CSS it is too long to post here. Trust me, it works if you move it to the end
326px difference is definately not 'inaccuracy'. Something is broken here big time. I might guess that you have more media queries and mistaken min-width max-width setups somewere.
The best to check what is actually going on:
Firefox - hit F12 (or open Dev Tools when on Mac)
Go to 'Style Editor' in Dev Tools top bar
Column on the right shows list of #media rules (breaking points)
Have fun and good luck with debug.
Related
I'm trying to change the breakpoint of a website's header.
the theme I installed onto this website has the mobile header breaking at 1139px and below. I want to change it so that it breaks at the standard 1024px (ie 1023px)
website: https://www.vibrantrealestate.com.au/
normally i just go into the css and change the #media query to the width i want to, but this theme has quite a few #media querys with min-width: 1140px/max-width: 1139px when i searched in the stylesheet so i'm not exactly sure which one I should change. i've tried trying to change them individually through the wordpress customiser, however i'm still a bit stuck for ideas as it isn't changing the appearance. thanks
I would not modify the theme's original style rules, instead you want to override them.
Although not advisable, this could be as simple as making new #media rules placed at the very bottom of the theme's CSS file, so in theory they override the earlier rules (if you configure the new rules correctly).
However the best thing would be to create a child theme, with the original theme as the parent. This would ensure your changes are wholly separate from the original code; much cleaner/safer/more-organized.
In either case, you'll have to use your brain to setup the new rules so they fully override the originals. You may need to make use of the !important flag.
You could make an override that covers a slightly wider range, to make sure your aesthetic changes take hold. e.g. min-width: 1000px/max-width: 1200px; (if the original is min-width: 1140px/max-width: 1139px).
You can't avoid work when doing responsive optimization.
Posted this over on Code Review initially because I was hoping to get some feedback on my CSS generally--which feels bloated to me--and I was told it belonged on Stack Overflow because I have a problem with nonfunctional code.
I've recently spent 9 hours building a site, my first time touching code in a few years, and even then I was never much good with it. I worked with a mobile-first approach in mind, but after building the basic site, I tried to implement media queries to get the site working well on larger screens and . . . well, my media queries flat-out have NO effect. As far as I can see from examples, I've formatted them correctly, but they produce no results at all.
This is a jsfiddle that contains the relevant content.
http://jsfiddle.net/LuGXP/
And the media query in question . . .
#media (min-width:480 px) and (max-width:960 px) {
body {
background:red;
}
}
Right now, I have it set to the very simple (and would-be eye-searing) change there just to test that it's responding to the media query at all. My actual goal would be to have the layout go from single-column at mobile device widths to dual column, then entirely horizontal, with a slight font-size increase at larger sizes.
Caveats:
1) I realize the code is likely very bloated. I want to address that at some point, but I figure it makes more sense to handle an actual pure functionality issue first and then take it back to Code Review.
2) There are some lines of CSS that probably don't make much sense with the index page. These pertain to the other linked pages, which share similar layouts.
If any more information would be useful, let me know.
Looks like a typo: http://jsfiddle.net/LuGXP/2/
BAD
#media (min-width:480 px) and (max-width:960 px) {
GOOD
#media (min-width:480px) and (max-width:960px) {
There shouldn't be a space between the value (480) and the unit (px).
It's usually good to work with the minimum code when trying to troubleshoot a problem. In your case, most of the code in your example is unneeded.
To that point, here's a stripped down example: http://jsfiddle.net/LuGXP/3/. As you might guess, this will turn the background red when the body is between 480 and 960x wide.
body{
background: green;
}
#media (min-width:480px) and (max-width:960px) {
body {
background:red;
}
}
I have a few questions about css media queries.
I. Does both css files (for example normal.css and lessthan1024.css) have to include all css rules? Or can lessthan1024.css include just rules that are different?
II. Does it work with browser resize? Or does page have to be refreshed?
Thanks
I. Let's say you want to have a header with a blue background, no matter the resolution. If you include in your lessthan1024.css file only what is different, that means you won't have a blue background for the header at less than 1024px. So what do you think is the answer to your question in this case?
II. It works on resizing the browser window. No refresh.
That being said, I believe it would probably be better to:
I. Use a mobile-first approach - that means that you start with the smallest display sizes as being the norm and then you start adjusting the look of your page for larger displays
II. Put all CSS, for all display sizes in one file, using #media rules; example:
/* base styling: common rules + smallest display rules*/
#media only screen and (min-width: 35em) {
/* adjust style for larger display */
}
The reason I believe this is better is because... well, if you use 2 .css files, then you will have some rules duplicated. Let's say you want to change some of them. You'll have to make the same changes in 2 places. Maybe you forget to make the changes in one file. Or maybe you don't remember that you've set a padding to 1em in one file and you set it to 2em in the other file.
When using responsive design, is there a way to still allow a user to view the full site?
E.g. They are viewing on an iPhone, but want to see the full site. They click a "Full Site" link, and it shows them the 1024px version.
If you're using media queries, only apply rules beneath a body element having the class 'responsive'.
#media screen and (max-width: 320px) {
body.responsive {
color: blue;
}
}
If the user doesn't want to view the responsive layout, simply remove the 'responsive' class from the body element, nullifying all rules. You could persist the users preference by cookie or some other method as well.
Demo: http://jsbin.com/obaquq/edit#javascript,html
Reducing the window to no more than 500px will turn the text white, and the background blue. This is conditional on the body having the 'responsive' class. Clicking the first paragraph will toggle this class, and thus toggle the effects of the media query itself.
I've been wondering about this. I had success using jQuery to modify the viewport tag, seems to work fairly well from what I can tell so far. Doesn't require multiple stylesheets or a lot of extra CSS.
http://creativeandcode.com/responsive-view-full-site/
Haven't tried this, but thought about this issue myself. I imagine you could use a stylesheet switcher that deactivates the core responsive stylesheet, leaving the user with the full version
Switching stylesheets certainly isn't a new concept. Here is an article for ALA circa 2001 addressing switching stylesheets: http://www.alistapart.com/articles/alternate/
Based on my research, it seems that what I want to do is not possible, but in case something has changed, I wanted to check to see if anyone had come up with a way to do this.
I have a web app that generates reports for print based on user selections in the browser window. I have a custom header and footer that, when the report is printed from the browser, should be repeated on every printed page. It is not the browser header and footer I need, but rather the custom ones that I generate. Also, I don't think this is an issue of CSS and media types, but I am not a CSS expert. I have no issues getting the header and footer to print once, but I can't get them to print on each page. I have read that perhaps if I recreated my report pages using tables, and then used table head tags and CSS, that may work at least to get the header on each page. I have not had success with this yet, but I will try it again if it is the only option. A coworker suggested that I count lines in my php and manually put out the header and footer as required. I guess that is an option, but it just seems like there should be a way to do this that isn't so "brute force"!
The other caveat is that I have to support IE 6, so I suspect some of the CSS things I have tried are just not supported.
If anyone knows any way to do this, that would be great! If there isn't, I will have to rethink my approach.
Thanks in advance!
UPDATE (14 Dec 2011)
I made considerable progress with this issue, and using some of the info from the answers, I did produce reports that were usable, but never as nice or as professional as I wanted. Footers would tend to be not close enough to the bottom of the page, I had to do a lot of guess work and "brittle" calculations about how big text was going to be to decide on inserting page breaks, I could only support a restricted set of page formats, and any changes to the reports resulted in a cascade of code changes and yet more brittle calculations. There was always a scenario that broke some part of some report. We revisted the requirements, and are now generating reports as PDFs using TCPDF. The documentation is a bit opaque, and it takes some experimentation, but the results are far superior and now the reports appear as they should. I would say to anyone trying to do HTML reports from the browser, unless they are very simple, save yourself the frustration (as others told me here) and go with PDFs or something similar.
It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)
If you set a CSS style as follows:
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
Then when you create your HTML, render your body as:
<body>
<table>
<thead><tr><td>Your header goes here</td></tr></thead>
<tfoot><tr><td>Your footer goes here</td></tr></tfoot>
<tbody>
<tr><td>
Page body in here -- as long as it needs to be
</td></tr>
</tbody>
</table>
</body>
Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".
If you want the header and footer to appear on printed media only, then use the #media parameters to do the right thing:
#media print {
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
}
#media screen {
thead { display: none; }
tfoot { display: none; }
}
Note
As of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:
The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)
The original bugs against Chrome (for reference) are:
https://bugs.webkit.org/show_bug.cgi?id=17205
https://code.google.com/p/chromium/issues/detail?id=24826
https://code.google.com/p/chromium/issues/detail?id=99124
This will work in some browsers, not not all. I don't think there is an elegant cross-browser solution
Include the print footer/header you want in divs on the page (in this example div id='printableFooter')
In the screen css file put:
#printableFooter {display: none;}
In the print css file:
#printableFooter {display: block; position: fixed; bottom: 0;}
I would suggest to divide the page in table, and add the header part to first row and the footer part to the last row. The contents of the rows between the first and last rows can be changed dynamically so you will get the constant header and footer at desired pages.
----------
ROW1 HEADER
----------
ROW2
Insert dynamic contents here
ROW N-1
----------
ROW N Footer
try to generate a (rtf | pdf) document for printing