Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've never used media queries before and I'm really not sure if my code will work properly on all devices. Therefor I want to ask you to speak from your experience and knowledge and tell me what problems may appear on some special/any devices.
After some reading, I decided to go with as simple as I thought way and used simple rule:
#media (max-width:504px){
/* My style for mobile/ipad etc */
}
#media (min-width:505px){
/* My style for laptops/desktop etc */
}
IMO it is still better to write CSS for one of two display sizes, and then override the styles with media query. Fo ex. mobile-first approach:
#some-element { font-size: 2em; }
.container { color: red; }
.another-class { width: 100px; }
#media (min-width: 505px) {
#some-element { font-size: 1.5em; }
.container { color: blue; }
}
This way have two advantages:
You dont have to write the same code for two media queries, only overrides (you dont have to duplicate .another-class for media query).
Ancient browsers without media queries support will render site using styles that are not in media query.
Artur answer is correct, old browsers like IE7 don't support media queries, but media queries design is intended mostly for moderns browsers, so creating a fallback CSS isn't exactly required unless you want to, mostly because some CSS properties (hiding certain elements with display:none for example) won't work so your intended web design will lose purpose. Each web designer have their own way of writing CSS, but I prefer this method:
body, html{
width:100%;
margin:0;
/* Base CSS that will affect all resolutions */
}
#elements-up-to-320px{
/* CSS for elements up to first media query */
}
#media (min-width:320px){
/* CSS for elements from 320px and up until next media query */
}
#media (min-width:480px){
/* CSS for elements from 480px and up until next media query */
}
This way it's more understandable and last CSS media query will apply for higher screen sizes.
#media is good if you want to create a CSS-Gridsystem (for example) It takes a parameter with the min-width or more. So you have the possibility to set different CSS-Propeties for different Screen-Sizes.
Links:
SELFHTML
w3schools
Hope that helped you :)
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to reduce the the width by which col-md-offset-1 of bootstrap assigns margin-left at a certain place. I would prefer this to be done by using LESS.
You don't really need Less for this since the solution there would be exactly the same as in pure CSS. Just override the corresponding property:
#media (min-width: 992px) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
In Less you could modify the method Bootstrap generates all such offset classes (by overriding/cascading these mixin and variables) but that would be an overkill for that tiny change you actually need).
#seven-phases-max wrote:
You don't really need Less for this since the solution there would be
exactly the same as in pure CSS.
I don't agree with that. Bootstrap uses Less to help you code DRY (don't repeat yourself). When your start hard coding your changes, your changes will break in future when you change some of the framework parameters.
Changing the behaviour of the .col-md-offset-1 depends on the #screen-md-min variable which sets the min-width for the media query, see: http://getbootstrap.com/css/#grid-media-queries
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
So in my opinion your Less code should look like that shown beneath:
#import "bootstrap"
#media (min-width: #screen-md-min) {
.col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Using the above you should notice that you can not recompile Bootstrap without running the autoprefixer, see: http://bassjobsen.weblogs.fm/compile-bootstrap-less-v2-autoprefix-plugin/
To keep you changes future proof you should also consider to make your modification only be applied for the situation where you need it (and do not change the properties of the predefined .col-md-offset-1 itself). For instance by using a unique parent of your grid;
html
<div id="maincontent"><div class="container"><class="row"><div class=".col-md-offset-1">
less
#import "bootstrap"
#media (min-width: #screen-md-min) {
#maincontent .col-md-offset-1 {
margin-left: 42%; /* <- your value here */
}
}
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary.
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width, height, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
I've just created a javascript shim to achieve this goal. Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work.
https://github.com/marcj/css-element-queries
From a layout perspective, it is possible using modern techniques.
Its made up (I believe) by Heydon Pickering. He details the process here: http://www.heydonworks.com/article/the-flexbox-holy-albatross
Chris Coyier picks it up and works through a demo of it here: https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
To restate the issue, below we see 3 of the same component, each made up of three orange divs labelled a, b and c.
The second two's blocks display vertically, because they are limited on horizontal room, while the top components 3 blocks are laid out horizontally.
It uses the flex-basis CSS property and CSS Variables to create this effect.
.panel{
display: flex;
flex-wrap: wrap;
border: 1px solid #f00;
$breakpoint: 600px;
--multiplier: calc( #{$breakpoint} - 100%);
.element{
min-width: 33%;
max-width: 100%;
flex-grow: 1;
flex-basis: calc( var(--multiplier) * 999 );
}
}
Demo
Heydon's article is 1000 words explaining it in detail, and I'd highly recommend reading it.
Update 2021/22
As mentioned in other answers, container queries are coming. There is a full spec for it, and its usage is detailed on MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
and there is a polyfill to get browsers that don't yet support it up to speed:
https://github.com/GoogleChromeLabs/container-query-polyfill
There is a nice little overview video of it here:
https://www.youtube.com/watch?v=gCNMyYr7F6w
This has now shipped to Chrome (05 September 2022)
https://caniuse.com/css-container-queries
A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!
This is currently not possible with CSS alone as #BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.
I created a container query (aka element query) polyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss
There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:
#element 'div' and (condition) {
$this {
/* Do something to the 'div' that meets the condition */
}
.other {
/* Also apply this CSS to .other when 'div' meets this condition */
}
}
So what conditions are supported for responsive styles with EQCSS?
Weight Queries
min-width in px
min-width in %
max-width in px
max-width in %
Height Queries
min-height in px
min-height in %
max-height in px
max-height in %
Count Queries
min-characters
max-characters
min-lines
max-lines
min-children
max-children
Special Selectors
Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:
$this (the element(s) matching the query)
$parent (the parent element(s) of the element(s) matching the query)
$root (the root element of the document, <html>)
Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.
With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and
The question is very vague. As BoltClock says, media queries only know the dimensions of the device. However, you can use media queries in combination with descender selectors to perform adjustments.
.wide_container { width: 50em }
.narrow_container { width: 20em }
.my_element { border: 1px solid }
#media (max-width: 30em) {
.wide_container .my_element {
color: blue;
}
.narrow_container .my_element {
color: red;
}
}
#media (max-width: 50em) {
.wide_container .my_element {
color: orange;
}
.narrow_container .my_element {
color: green;
}
}
The only other solution requires JS.
The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. For example, let's say you decide to make your container's 50% of the screen width. Then for a screen width of 1200px you know that your container is 600px
.myContainer {
width: 50%;
}
/* you know know that your container is 600px
* so you style accordingly
*/
#media (max-width: 1200px) {
/* your css for 600px container */
}
You can use the ResizeObserver API. It's still in it's early days so it's not supported by all browsers yet (but there's several polyfills that can help you with that).
This API allows you to attach an event listener when resizing a DOM element.
Demo 1 - Demo 2
I was also thinking of media queries, but then I found this:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html
Maintain the aspect ratio of a div with CSS
Just create a wrapper <div> with a percentage value for padding-bottom, like this:
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}
<div></div>
It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).
This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.
It's enough for my needs. Which might be enough for your needs too.
For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style.
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I would like to know how you are handling Responsive design combined with SCSS in SASS. The main question is about media queries.
1) Are you writing media queries straight inside styled element using breakpoint mixin like this:
.element{
width:40%;
#media screen (min-width:700px){
width:100%;
}
#media screen (min-width:1000px){
width:50%;
}
}
// CSS
#media screen (min-width:700px){
.element{
width:100%;
}
}
#media screen (min-width:700px){
.element2{
width:50%;
}
}
2) Or are you writing them to special separate partial file? Like this for instance:
/* _responsive_wide_screen.scss */
#media screen (min-width:1000px){
.element{
width:50%;
display:inline-block;
}
.element2{
width:20%;
}
}
More faster to do is probably example number 1, but the problem is that the media query statement is generated for each element and the CSS file size is getting bigger and bigger. Should I avoid this approach?
I’m using example number 2 but sometimes is not so user friendly to switch between the files.
Thanks
My own preference is to use the first approach you showed. I like the benefits it provides in terms of localizing media queries to a specific element; I find it speeds up responsive workflow and encourages making adjustments where they are needed for the design/layout rather than just at specific breakpoints.
For large projects where it's worth the extra time, I then go through and consolidate media queries with identical min-width and max-width values. Having to do this secondary optimization is certainly a drawback of this approach -- I am hopeful that an upcoming release of Sass will automate this feature for us.
Support seems to be different across browsers..
Check the link
Firefox: Black with white text.
Opera, Chrome, IE9: Blue with black text.
Which is correct and how would I make it consistent?
The code
#media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
#media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
Interestingly enough it appears that nesting media queries within a conditional #import does seem to work.
e.g:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
#import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
#media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
For those simply looking for an answer to "Which browsers support nesting of #media rules?", the short answer is that all modern browsers, including Firefox, Safari, Chrome (and its derivatives), and Microsoft Edge, now support nesting of #media at-rules as described in CSS Conditional 3. The code in the question with the nested #media at-rules should now work correctly everywhere, with the exception of Internet Explorer (which is no longer being updated with new features, meaning no version of IE will ever support this feature).
This feature did not exist in CSS2.1, since only media types existed at the time which you could simply group with a comma, which explains why support for this was very poor at the time this question was first asked.
What follows is an analysis of the original question with these historical limitations in mind.
There's a bit of terminology confusion that needs clearing up in order for us to understand what exactly is happening.
The code you have refers to #media rules, and not so much media queries — the media query itself is the component that follows the #media token, whereas the rule is the entire block of code consisting of #media, the media query, and the rules nested within its set of curly braces.
This may cause confusion among many when it comes to using media queries in CSS, as well as your specific case where a #media rule in an imported stylesheet works correctly even when the #import is accompanied by another media query. Notice that media queries can occur in both #media and #import rules. They're the same thing, but they're being used to restrictively apply style rules in different ways.
Now, the actual issue here is that nested #media rules are not valid in CSS2.1 because you're not allowed to nest any at-rules within #media rules. However, things seem quite different in CSS3. Namely, the Conditional Rules module states very clearly that #media rules can be nested, even providing an example:
For example, with this set of nested rules:
#media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
#media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule ‘#navigation { display: none }’ applies whenever this style sheet is applied to print media, and the rule ‘.note { float: none }’ is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.
Furthermore, it looks like Firefox is following this specification and processing the rules accordingly, whereas the other browsers are still treating it the CSS2.1 way.
The grammar in the Syntax module hasn't been updated to reflect this yet, though; it still disallows nesting of at-rules within #media rules as with CSS2.1. This specification is slated for a rewrite anyway, so I guess this doesn't matter.
Basically, CSS3 allows it (pending rewriting the Syntax module), but not CSS2.1 (because it neither defines media queries nor allows nested #media rule blocks). And while at least one browser has begun supporting the new spec, I wouldn't call other browsers buggy; instead, I'll say that they simply haven't caught up yet as they're really conforming to an older, more stable spec.
Lastly, the reason why your #import works is because #import is able to work conditionally with the help of a media query. However this has no relation to the #media rule in your imported stylesheet. These are in fact two separate things, and are treated as such by all browsers.
To make your code work consistently across browsers, you can either use your #import statement, or, since both of your rules use min-width, simply remove the nesting of your #media rules:
#media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
#media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}