Can someone demonstrate the correct usage of media queries, please? I've got quite a lot of responsive code - i.e. a simplified version below. I would like the second media query to inherit the attributes of the the previous ones too, if that makes sense? i.e. p should have a font-size 30px and text-align center when in min-width 201px. At the moment I'm having to duplicate the code, which in this case is fine but with a big code-base it's pretty horrific and 99% redundancy. i.e.
media query 1 - p{font-color:blue;}
media query 2 - p{font-color:blue; font-size:5px;}
media query 3 - p{font-color:blue; font-size:5px; text-align center;}
I would like to have it so in media query 3 I can just do p{text-align: center;} with the rest inherited.
#media query screen and (min-width:100px) and (max-width:200px)
{
p{font-size:30px;}
}
#media query screen and (min-width:201px) and (max-width:300px)
{
p{text-align:center;}
}
If you want rules from the earlier media queries to apply, then write them so they don't explicitly exclude the later ones.
i.e. remove the max-width rules.
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
I need to improve my webpage design, when shown on smartphone.I am working in wordpress and making alterations through the childtheme. I am using a media query. Right now the #media is set to min-width 600px.
However NOTHING is happening. No matter how i tweek the code or what setting/classes/div's I am using, nothing changes when I go to see the page on a smartphone. The closest I got was modifying a .h3 tag, but then alterations appeared in screen mode - not in smartphone mode.
Even weider this code was working fine a couple of days ago, and .Profilbillede was repositioned using this media query.
Is there any way that the media query cannot be "linked" correctly, in the child theme? I've tried to look for syntax errors, but I cannot find any.
Specifically I need to add padding to h2#lfb_mainFormTitle. Right after this ... needs to be positioned lower and then follows
which need to be positioned below the .... Am i making any sense?
This is the first time I am doing this
--------------------------CSS here--------------------------
#media only screen and (min-width: 375px) {
/*billede nederst til højre*/
.Profilbillede {transform: translateY(-46px;)
}
h2#lfb_mainFormTitle {
font-size:32px!important;
background-color: blue;
}
}
Does anyone know why my media queries code doesn't work?Thanks!
#media only screen and (min-width:450px){
.dark-blue{
width: 25%;
}
.blue{
width: 75%;
}
}
More details in my github https://github.com/kmfb/udacityProjects/tree/master/column%20drop
Just move the #media to the bottom of the css page.
Check working example.
Cheers,
https://jsfiddle.net/frc7r123/
It mostly depends on your project because at the end of the day it is all about maintenance and adding more stuff to it easily.
So, if you are working on a project which only has a few media queries I would suggest leaving them all at the bottom of your stylesheet but putting comments on top of it to make it explicit and also easier for you to find it later.
However, if you know you are going to have a lot of properties meticulously defined in your media queries and also have various devices defined then I would suggest separating them out just for readability/maintenance reasons.
It works, but you need to place your media query below your other CSS. Otherwise it won't overwrite anything.
Ok, I have encountered a problem while experimenting with media queries. I'm wondering if any of you could possibly help me on this issue. The purpose of this code is simple. When the screen size is above 600px the banner should not be visible and when the screen size is below 600px the banner should appear.
#media (max-width: 600px) {
.banner {
display: none;
}
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Now as you run the code above(I assume you just did) there is nothing wrong.
Ok, now I will add similar code.
#media (max-width: 600px) {
.banner {
display: none;
}
}
.banner {
display: block;
}
<header class="banner">
<h1>Banner</h1>
<p>Banner Content</p>
</header>
Outside of the query is a style that contradicts the style given in the media query. Now what I believe to know about media queries. The styles within the query should override any other existing styles just as long as the screen-size condition is met.
If this is normal, what would be the best way of having the style within the media query override the other existing styles outside the query.
(Assuming all else is equal) Styles are activated in the order of precedence that they're encountered, unless encased in what amounts to an IF query, such as a media query.
.banner {
display: block;
}
So the above CSS will always display, no matter what other IF statements come before the rule itself. Which is not what you want.
Solutions:
1) You instead need it to be encapsulated within its own media query to only show when ABOVE 600px so:
#media (min-width: 601px) {
.banner {
display: block;
}
}
2) You place all your media queries in reverse order, so all at the bottom of (last in) your CSS file(s), so the media qualifiers are read AFTER the standard rules.
EDIT:
As Sean qualifies in comments, there are various more specific CSS selections, rather than just the order of appearance in the file, that can bend which rules take precedent over others. The order of appearance works in this case and works when the subject rules are all equal (such as all direct classes only) but please note that there will be other CSS rule instances that can complicate the issue. This answer is not intended for more complex CSS rule ordering.
It depends on the order of the rules: Every rule that comes AFTER a rule in a media query (for the same class or ID) will override it.
In your case the "general" rule for .banner is below/after the media query, so it overrides the rule in the media query. You have to write the general rules first, followed by the media queries.
For me HTML + CSS is quite complex. HTML + CSS + #media is nightmare. Now my HTML + CCS looks like spagetti. Pls help me with questions:
How should I organize my SCSS includes: by function (header/footer)
or by dimension (0_480)?
How should I use #media limits:
max-width only: 0-420, 0-870, no limit
min-width + max-width: 0-420, 421-870, 871+
min-width only: 870+, 420+, 0+
To test site for Adaptability can be easily and quickly!
http://plastilin5.com/tools/
here's a good example (check in the lower part of the site)
http://m.alistapart.com/articles/responsive-web-design/
you can place all your stylesheet imports in the header.
On how to use #media max and min widths, some developers would argue strongly for “mobile first”, e.g. focus on styles for small screens first, and then override those styles for larger screens.
http://stuffandnonsense.co.uk/blog/about/320_and_up/
I think that would match most closely with your “max-width only: 0-420, 0-870, no limit” option.
Here is what I do:
write CSS for maximum size only
at the end of the CSS file (or as #import if the project is to big) add "#media screen and (max-width: 1700px)" and write all the changes for that resolution
repeat previous step for every needed resolution
The main reason I think this is the best approach is that for the smaller screens you can (and most probably will) decide not to show some of the elements, and you'll be able to do that by simply adding display:none; to those elements on the first (biggest) resolution they are to be hidden on. While when you're building your CSS the other way around, adding elements becomes a bit harder to follow.
Sass has what they call "media query bubbling", which means that no matter what nesting level your media queries are placed at, they will bubble up to the top. This is both a good thing and a bad thing if you aren't using it responsibly (good that you can keep your media queries grouped with related styles, bad if used excessively since you end up with 100s of media queries all over the place).
What I've found that works for my workflow is to group together media queries as much as possible with the block of content that its for. Each major block of styles is broken up into its own file (master layout, image gallery, clients, etc), and each file will have as few numbers of media queries as possible (typically only 1 or 2, 3 or more for more complex blocks).
$x-small-device: 25em; // smallest
$small-device: 35em; // larger mobile
$medium-device: 55em; // tablet or really small desktop
.clients {
// no matter what resolution, these styles are always applied
#media (min-width: $small-device) {
// have our clients display in a 2-col layout
}
#media (min-width: $medium-device) {
// have our clients display in a 3-col layout
}
}
If you try to break it up based on the width of the device you're targeting, it is more difficult to find where the styles are located when it comes time to change it.
Ok, first of all I think that you should read more about CSS architecture. The first question is kinda complex and involves different concepts. I'll suggest to check OOCSS, SMACSS or Atomic design. There are some really great ideas. What I usually do is to use a mixture between all those things. I guess that you will find what it fits in your project.
Media queries should not be based on the devices or on some popular resolutions. You should set your break points based on the content that you have. Try to follow the Mobile First concept and see where the content needs updating. Very often the different break points are related to different parts of your site. I mean one media query may refer only the header of the application. Another only the footer and so on. I'll also suggest to use media queries bubbling. I.e. to place those parts inside the container that you want to change, not in a separate file or at the end of the current one.