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.
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.
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.
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 am currently using media query in my css but my site is still looking bad. Is there a way to determine first the witdh of a browser and then load different index files?
To post some code here is my media query:
#media screen and (max-width: 600px) {
.topbar{
opacity: 0;
}
....
}
I would say do some more research on building your CSS but to answer your question:
<script type="text/javascript">
if (screen.width <= 699) {
document.location = "http://mobilesite.com";
}
</script>
It might be an idea to load different css files for different screen sizes; essentially moving the media selection from the css to the html:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="600px.css">
You might want to read Detect different device platforms using CSS for some related content.
Generally you want to aim to use the same .html file for your website, then use CSS to customise specifically for desktop or mobile. I know you may have very different ideas for the two sites, but it can all be done in pure CSS if your markup (html code) is good enough. Check out the CSS Zen Garden for how powerful CSS can be.
If you want to completely reset your css for the mobile site, just wrap the old css in a media query targeting screens screen and (min-width: 601px), and you will find your mobile site is completely unstyled
css has nothing to do with loading different index files according to the browser width.
If you want to style your elements differently using #media rules, make sure they are set close to the bottom of the page, in other words - after the main styles, because otherwise - they will be simply overwritten.
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/