I have a, for me, strange situation that I have never came across before.
I have created a class that defines a font-size of 0.8vw
If the screen-size-width is smaller then 750px a new media query is loaded where the font-size is 3.2vw.
Because this is the same class I have to use !important on the 750px query.
Here comes the problem.... If, and there is, there will be another media-query I have to use another !important but as far as I know that won't be possible.
I'm starting to think that I don't fully understand how to use the media-queries in combination with different styles.
Here is an example of how this should go:
#media (max-width: 750px) {
.header_devider{
font-size: 3.2vw !important;
}
}
#media (max-width: 320px) {
.header_devider{
font-size: 4vw !important;
}
}
.header_devider{
font-size: 0.8vw;
}
<div class="header_devider">
test content
</div>
Hope somebody can tell me how to fix this.
M.
Declare your media queries after your initial style declaration and it should work:
.header_devider {
font-size: 0.8vw;
}
#media (max-width: 750px) {
.header_devider {
font-size: 3.2vw;
}
}
#media (max-width: 320px) {
.header_devider {
font-size: 4vw;
}
}
Related
I have taken a screenshot of it in google chrome devtools to help explain this.
I have used scss that is then ccompiled to css using Koala. The media query is after the original css meaning it should be over written, however this is not the case.
Any explanation is appreciated (I have added some code examples so you dont have to view the image)
Line 190:
#recent-users, #frequent-trees{
width: calc(50% - 80px);
padding: 0px 40px;
}
Line: 261:
#media only screen and (max-width: 600px) {
#recent-users, #frequent-trees {
width: 90%;
padding: 0px 5%;
}
}
If you look carefully the selector is:
#content #recent-users, #content #frequent-trees
You either set the same for the media query:
#media only screen and (max-width: 600px) {
#content recent-users, #content #frequent-trees {
or use !important rule to override it:
#media only screen and (max-width: 600px) {
#recent-users, #frequent-trees {
width: 90% !important;
padding: 0px 5% !important;
}
}
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I wrote media query for my HTML code, but not applying. I have to show my text in center in small screen.
#media(max - width: 400 px) {
h1 {
text - align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
How to fix?
The problem that #Zvezdas1989 is removing is that you had a space between 400 and px, they need to be together, just like the max-width and the text-align.
#media(max-width: 400px) {
h1 {
text-align: center;
}
}
So that will fix the problem.
It's not applying because of the spaces, you need to remove those in order to make it valid:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
You need to remove the spaces, like this:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Hello Friends</h1>
I am trying to using media queries. I have included meta name="viewport" content="width=device-width, initial-scale=1"> in my head and #media (min-width: 768px) {
background-color: red;
}
in my css. Is there something I am missing because this does not work.
Your media query is ok, but your background-color is just a CSS property, you have to specify which element is concerned:
#media (min-width: 768px) {
html, body {
background-color: red;
}
}
You tagged this as utilizing SASS as well as responsive design, so I think it's appropriate to offer a more elaborate, SASS-oriented answer, in case other people have related questions in the future.
First off, everything #migli said was spot on - you have to make sure that you are targeting a specific DOM element to style in your CSS. One of the major benefits of using SASS is that it allows you to keep your code DRY, and creating breakpoints makes writing media queries super simple.
To do so, set up a #mixin that establishes your specific breakpoint thresholds (e.g. here is a easy-to-follow general-purpose example by Tim Knight:
#mixin breakpoint($class) {
#if $class == xs {
#media (max-width: 767px) { #content; }
}
#else if $class == sm {
#media (min-width: 768px) { #content; }
}
#else if $class == md {
#media (min-width: 992px) { #content; }
}
#else if $class == lg {
#media (min-width: 1200px) { #content; }
}
}
Now, as you're editing your SASS files, you can compartmentalize your code, to keep it DRY. For example, the following SASS:
body {
height: 100%;
width: 100%;
font-size: 1.8em;
#include breakpoint(md) {
font-size: 1.5em;
}
}
outputs
body {
height: 100%;
width: 100%;
font-size: 1.8em;
}
#media (min-width: 992px) {
body {
font-size: 1.5em;
}
This is a small example, but as the size and scope of your project grows, saving keystrokes and improving readability will greatly enhance your productivity (and sanity!).
I am not sure if this is entirely possible. Want to check here.
Basically what I am trying here is to have a default font size (say 40px). when a media query kicks in I want to change it to reduce to 80% of default font size. Is that possible?
.text p span{
font-size:40px;
}
#media screen and (max-width: 640px){
.text p span{
font-size: <0.8*40px>;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.text p span{
font-size: <0.6*40px>;
}
}
The reason I am not setting px values is because .text p span gets different class names which will have different font sizes. But they need to scale down in the same ratio. Am I trying that's not achievable?
You could use em, like this, where you set a default on the body, or on any parent you want to inherit font-size from, and adjust from there
Also rem and % is possible alternatives, it all comes down to markup structure etc.
em is relative to its direct or nearest parent, rem is relative to the html (root) - their font-size.
body {
font-size: 20px;
}
.text p span {
font-size: 2em;
}
#media screen and (max-width: 640px) {
.text p span {
font-size: 1.6em;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px) {
.text p span {
font-size: 1.2em;
}
}
<div class="text">
<p>
<span>
Hey there ...
</span>
</p>
</div>
With rem one can do like this
html {
font-size: 40px;
}
.sampleClass {
font-size: 20px;
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.sampleClass span {
font-size: 0.8rem;
}
}
#media screen and (max-width: 640px){
.sampleClass span{
font-size: 0.6rem;
}
}
<p class="sampleClass">
This is 20px
<span>This is relative to the html element when #media kicks in</span>
</p>
I'm not the biggest fan of ems but if you only want to reduce to 80% use .8em as your strong override of the .text p span size you have set.
#media screen and (max-width: 640px){
.text p span{
font-size: .8em;
}
}
It might be worth looking into Sass/Scss for setting variables and having operators applied to them. You can set your variables at the start of your stylesheet, and when you compile your .sass or .scss file, it outputs the correct number in your .css file
http://sass-lang.com/guide#topic-8
It is entirely possible and as you can probably tell there is a number of ways to achieve this. The technique I use is very simple:
Set the font-size on the body and html elements in px, as well as any media query to step the font size up or down, in px.
Use rem units to set the font-size where you need. rem stands for root em, where root is the topmost element in the DOM, usually html or body.
Example:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
/*
The rem values use 18px or 15px as the base unit
depending on matching query.
In this case there is no need to use 1rem unless you need to reset
a previously changed value.
*/
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
Using rem makes it very easy (for me at least) to reason about relative sizes.
em on the other hand is very useful if want a value to be affected by the font-size of the closest parent element.
For example if you wanted to have a padding that scales proportionally to the text size of a .heading, then you'd use em:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
/*
Now you define a padding that is always 80% of the element's
font-size.
And since .heading is set at 1.2rem, the padding will be
80% of 1.2rem.
*/
.heading { padding: 0.8em; }
I'm doing some different styling for different screen sizes, based on the bootstrap grid system sizes. For some reason some of the styling is working and some isn't. Here is the css:
#media only screen
and (max-width: 767px) {
div.bm {
display: none;
}
div.br {
height: 40%;
}
div.main-row {
height: 60%;
}
#main-text{
font-size: 3rem;
font-weight: 300;
}
}
#media only screen
and (max-width:991px)
and (min-width:767px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text{
font-size: 4.5rem;
font-weight: 300;
}
}
#media only screen
and (min-width:991px)
and (max-width:1999px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text {
font-size: 5.5rem;
font-weight: 300;
}
}
#media only screen
and (min-width: 1200px) {
div.sm {
display: none;
}
div.main-row {
height: 100%;
}
#main-text {
font-size: 6.5rem;
font-weight: 300;
}
}
It is mainly the display:none that are not taking effect, but it seems like the #main-text is getting resized correctly. I have a feeling there is a syntax error around the line:
#media only screen
and (min-width:991px)
and (max-width:1999px) {
Because I'm using the css preprocessor stylus, and it's causing this error around that line of code:
ParseError: stylus/monster.styl:40:8
36| font-weight: 300;
37| }
38| }
39|
40| #media only screen
--------------^
41| and (min-width:991px)
42| and (max-width:1999px) {
43|
expected "indent", got "media"
What is wrong with the code?
One problem is this:
The first:
#media only screen
and (min-width:991px)
and (max-width:1999px)
The segment of pixel-widths here is [991; 1999];
The second:
#media only screen
and (min-width: 1200px)
The segment of pixel-widths here is [1200; +infinite]
If you take a look at those two arrays of pixel-widths: there are some elements that are included in both media queries: [1200; 1999];
That will result in an error, becase they can't both run, when the condition is true for both of them.
Check for other problems like this.