first thing, I'm a hacker when it comes to CSS. Trying to read and practice as much as possible to get better. Currently, I'm trying to add a set of media queries to a row to control padding, margins, and font sizing from mobile up so my text is positioned exactly where I want it. My question is how do I create a class for a row, so these styles only apply to this row of content. In this case, it's the first(hero) row on my website that has html text over an image. Below is what I'm trying to write, give or take a couple fine tuning adjustments. How do I create a single class to control the styling of the h2 and h3 classes?
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
}
#media only screen and (max-width: 481px) {
#wrapper .hero h3 {
font-size: 22px!important;
}
}
I appreciate any guidance or support the community can share!
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
Else you can use less or SASS preprocessor for control multiple property in single class
From your CSS, it's clear that your want to apply different font size to different child elements in the same viewport. It will not be possible to define two values for same property i.e font-size in this case and expect the browser to use both for different elements. However, you need to define the media query only once:
#media only screen and (max-width: 481px) {
#wrapper .hero h2 {
font-size: 36px!important;
}
#wrapper .hero h3 {
font-size: 22px!important;
}
}
Related
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
Currently, I am using #media to define different CSS for different screen sizes
#media (max-width: 1800){
body{
font-size: 14px;
}
}
#media (min-width: 1800){
body{
font-size: 16px;
}
}
I am having trouble making sure to update both resolution's CSS when I make a change because they are located far from each other.
Is there a way to internalize the screen size to inside the class?
ie:
body{
#media (max-width: 1800){
font-size: 14px;
}
#media (min-width: 1800){
font-size: 16px;
}
}
No, you can't include media queries inside the declaration block of a css rule.
However, it sounds like your issue may be primarily related to organizing quite a bit more css than you included in your example to simplify the process of making changes to specific selectors. If that is the case, then it may help you to use more than one media query for the same breakpoint. This may help you organize your css for simpler maintenance (locate related css rules closer together), but it does add bloat to your code due to the repeating #media rules (whether the bloat is a reasonable tradeoff for simplifying the maintenance process is up to you).
For example:
/* body styles */
body {
font-size: 14px;
}
#media all and (min-width: 1800px) {
/* body styles for 1800px and above */
body {
font-size: 16px;
}
}
/* h1 styles */
h1 {
font-size: 24px;
}
#media all and (min-width: 1800px) {
/* h1 styles for the same media breakpoint as above */
h1 {
font-size: 36px;
}
}
I have written a CSS media query
like this -
#media screen and (max-width: 59.9375em) {
.left {
display: none;
}
}
This works fine across all the browsers except Safari 10.0.4 and below.
Safari seems to be handling the media queries differently.
Other browsers seem to be taking the window.innerWidth as viewport width for triggering media queries, but safari seems to be taking document.documentElement.clientWidth as viewport width and triggers the media queries accordingly.
I can see a difference of 15px between the actual and expected breakpoint.
I am looking for a cross-browser way for dealing with this issue.
Thoughts are welcome, thanks in advance.
The window width vs actual width is actually a super interesting topic. Snuggug has a really extensive explanation for it, but in short it's based on how the scroll bars are placed in different browsers.
Some browsers overlay the scroll bar on top of the content/site. Other browsers shorten the width of the content/site and have the scroll bar next to it. This obviously creates some discrepancies in how different browsers calculate the width of the viewport.
A potential problem is your usage of em as a unit of measurement.
It is important to remember that em is a measurement unit based on your current font size, and is therefore open to browser interpretation.
Depending on your font-family and overall font-size, 60em is usually around the area of 800px. Which means your query would be more specific looking like this:
#media screen and (max-width: 800px) {
.left {
display: none;
}
}
If you are unsure about the styling being overridden, you can always apply an important rule like this:
#media screen and (max-width: 800px) {
.left {
display: none !important;
}
}
If you would prefer to not use the !important tag in your CSS, then you will need to ensure that you look out for the two scenarios listed below:
CSS reads from Top to Bottom
This means that if you have a rule specified for your .left element, it needs to be placed before your media query and not after
The WRONG layout would look like this:
#media screen and (max-width: 800px) { //media query BEFORE rule
.left {
display: none;
}
}
.left {
.display:block;
}
The CORRECT layout would look like this:
.left {
.display:block;
}
#media screen and (max-width: 800px) { //media query AFTER rule
.left {
display: none;
}
}
The next bit to keep in mind is:
Nested CSS selectors take precedence
Use the same amount of parent selectors (or more) in your media query rule.
The WRONG series of selectors:
.container .left { //2 selectors used in query
.display:block;
}
#media screen and (max-width: 800px) {
.left { //only 1 selector used in query therefore overwritten by the previous rule - this should have atleast 2 selectors to overwrite the previous rule
display: none;
}
}
The CORRECT series of selectors:
.container .left { //2 selectors used in query
.display:block;
}
#media screen and (max-width: 800px) {
body .container .left { //3 selectors used in query
display: none;
}
}
use px (pixels) instead of em.
em is not fixed but it is relative. parsed different for different browsers.
#media screen and (max-width: 59.9375px) {
.left {
display: none;
}
}
try this css hack :
#media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
#media {
.left {
display: none;
}
}}
Source : https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/
You should read these two articles:
https://zellwk.com/blog/media-query-units/
https://adamwathan.me/dont-use-em-for-media-queries/
Then you'll understand why you have the problem you've asked about.
TLDR: em values are based on root font-size values, but in the case of Safari vs other browsers, em is either relative to the initial value or the root value (browsers pick one or the other for media queries, but not both, which can cause discrepancies across browsers)
you have to use media query after .left class as per the css rule
For example
.left {
display:inline;
}
#media screen and (max-width: 59.9375em) {
.left {
display: none !important; //important will override all the .left class.
}
}
This may be a beginner question concerning CSS.
Is it possible to decide what to to print (dispay) using CSS and media queries?
Say for example if my window (or device screen) is smaller than 500 pixels then dispay "Hello!" otherwise dispay "Guten Tag!"
What I have found shows how to decide some display attribute (color or ...), never the contents itself.
You can use a pseudo-element with content:
p::before{ content: 'foo' }
#media (max-width: 500px){
p::before{ content: 'bar' }
}
<p></p>
JSFiddle
You'd need to have two elements, one for screen bigger than 500 and one for less than 500. Then use media queries to show/hide one on them
DEMO: http://jsbin.com/pizosehire/edit?output
HTML
<div class="large">Hello</div>
<div class="small">Guten Tag</div>
CSS
.small {
display: none;
}
#media (max-width: 500px) {
.large {
display: none;
}
.small {
display: block;
}
}
You will need to work with media-queries.
You can change your css to something like this
#media (max-width: 500px){
#mydiv{ background: url('img-sx.img') }
}
#media (min-width: 501px){
#mydiv{ background: url('img-s.img') }
}
I am not entirely sure of the best way to place declarations such as
#media screen and (max-width: 600px) {
//
}
in my stylesheet. If, for example, I have a block of rules pertaining to some element (say, the sidebar) and I want to include some responsive rules with it, then it is tempting to insert the above code along with all the other rules for the sidebar. But then I might have some other element (say, the header) that also needs to change in some way when the screen width is below 600px. Then I'll end up with several #media screen and (max-width: 600px) declarations scattered up and down my CSS file. But it makes more sense- to me- to prioritize grouping together CSS rules according to the HTML elements they control.
So can I do this? Is there a negative performance impact from having
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
}
#media screen and (max-width: 600px) {
.header {
font-size: 16px;
}
}
rather than
#media screen and (max-width: 600px) {
.sidebar {
font-size: 12px;
}
.header {
font-size: 16px;
}
}
?
There is no notable loss of performance using several media queries instead of only one. However, if
you resize or zoom-in/out your browser, there can be a peak of memory and CPU load.
You will not resize your browser, but partially-sighted users needs to zoom your website, etc.
You should consider using a CSS Preprocessor like Less, SASS, or Stylus. A media query can be placed as a CSS property in your rule:
// app.less
#max-width: 600px;
.sidebar {
background: #2c2c2c;
#media screen and (max-width: #max-width) {
font-size: 12px;
}
}
If you can't use a CSS Preprocessor, then don't duplicate your media queries because of maintenance nightmare.
I think it would just bulk up your css file size, but if you minify it, you should be fine. It is best practice though to accomplish as much as you can in as little code as possible.