I understand that media queries are conditional in-and-of themselves; however is there a 'right', (non-hackish) solution to apply media query #1 if element 'x' exists (whether it is display:none;) on the page, and if not, apply media query #2?
The default media query would be something similar to this..
#media (max-width: 780px) {
.right-col {
float:left;
width:98%;
}
.left-col {
float:left;
width:98%;
}
}
while the other media query would merely change the breakpoint..
#media (max-width: 600px) { ...
Example plunker
I am looking to determine if the .sidebar is visible (whether it is display:none;). Depending on it's visibility I want to use a different media query so that my columns collapse at a different breakpoint than previously.
Related
So far, my rule of thumb is to use viewport units for simple webpages, because it gives the website a lot of flexibility; but when the webpage is complex, use media queries.
There are some intermediate cases where I use both, just because it is easier. The next link is an example I built: https://codepen.io/santimirandarp/pen/jjboKN the css file looks like this:
body{
background-color:lightblue;
text-align:center;}
main{
font-size:calc(10px + 0.5vw);
margin: auto;
width: 80vw;
}
#title{
color:magenta;
}
span{
color:hsl(110,100%,55%);
font-size:calc(20px + 3vw) ;
}
#description{}
p{font-size:calc(13px + 0.5vw) ;
text-align:justify;
line-height:calc(20px + 0.5vw);
margin-bottom:2vw;
}
#linend{
color:blue;
text-align:center;
font-family:Garamond;
font-size:1.5em;
background-color:yellow;
}
#media only screen and (min-width: 1000px) { #media only screen and (min-width: 1000px) {
main{width:45%;}
p {font-size:100%;
}
p strong{font-size:100%;
color:brown;}
}
Question
Is this approach correct? When to use viewport units vs media queries?
Can you explain the right approach?
As of MDN:
Media queries are useful when you want to modify your site or app depending on a device's general type (such as print vs. screen)
In comparison, the purpose of the viewport is to adapt on the screens dimensions, like width and height.
That in mind, there is no 'use viewport or media queries'. With media queries you can differentiate media types - not only their dimensions. For example, when you have media print, you might want to remove colors. Additionally (not alternatively) you can use viewport units to specify the dimensions.
Since you are using both media queries and viewport units, my answer would be: yes, your approach is right. Though, I don't think there is a strict right or wrong here.
Is there a native or good browser supported way to wrap ALL words in once when the smaller getting viewport triggers for the first time a word break ?
Example:
07/2015 to 01/2016
is lets say three words. As standard it will break when the viewport gets smaller in the first event to:
07/2015 to
01/2016
and in the second event to:
07/2015
to
01/2016
I tried around with white-space and invisible html characters but no success. It should look like on the second event, the first events example should never happen.
I forget to to write that i use it in a flexbox ( display: flex;)
#media only screen and (max-width: 1024px) {
.custDate{display:inline;}
}
#media only screen and (max-width: 768px) {
.custDate{display:inline;}
}
#media only screen and (max-width: 320px) {
.custDate{display:table-caption;}
}
pls use this in media queries
.className{display:table-caption;}
`http://jsfiddle.net/zgKbg/`
I want to use two different background-image:url() values based on screen size. This is fairly simple to do if the urls are known ahead of time:
#media (max-width: 400px) {
.element {
background-image:url("/Images/1.png");
}
}
#media (min-width: 401px) {
.element {
background-image:url("/Images/2.png");
}
}
However, I do not know my image urls ahead of time - they are based on information from the user. I can set a single background-image:url() dynamically in the code behind like so:
string backgroundStyle = "background-image: url(\""+loginImagePath+"\"); ";
sBodyWrapper.Attributes.Add("style", backgroundStyle);
But I'm not sure how I might go about setting two different background images which alternatively show based on screen width. I could set the two background images on different elements and hide one of those elements, but I really would like this background image to be on a single body wrapping element.
Is there any way to set values inside of media queries? Can conditional css be applied on the element's style attribute?
You could add the conditional CSS via a style tag appended to the document:
var rules = '<style>
#media(max-width: 400px){
background-image:url("Images/1.png");
}
#media(min-width: 401px){
background-image:url("Images/2.png");
}
</style>';
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.
Title says it all, but here are more details. I have a table with 8 columns. 2 of these columns contain information that I wouldn't mind truncating if the table is resized, but the other columns contain information that should be shown in full. So I when the table is resized and made narrower, I would like all the narrowing to occur only in those two columns, not in the others.
Give the cells that you don't want to wrap a class (.nowrap), Then add the following CSS:
td.nowrap {
white-space: nowrap;
}
WORKING DEMO
I would use a media query to achieve this. Once the table element gets to a certain width, hide or shrink the columns. Something like this, you will have to tweak it and possibly add more. Also check out Twitter Bootstrap. You can easily achieve this using their framework.
#media (min-width: 1200px) {
#tableColumn {
display:block;
}
}
#media (min-width: 700px) {
#tableColumn {
display:none;
}
}