I am trying to write some css for an element with an id #myid, specifically for a viewport in bwetween 768 and 1024px. I have the desired css in
#media (max-width:1023px) and (min-width:768px){}
tags. My trouble is that it is getting overwritten by some css, unscoped by a media query, that comes later in the .css file. Because I would like there to be a default look for browsers that don't support media queries, I don't wish to wrap the unscoped css in another media query. Is there any way to avoid this problem and still keep consistent non-media query styles for browsers that don't execute #media?
You have a three options I can think of.
Move the #media .query to the bottom of your CSS file
Move your #media query to a separate file and import it last (after the main CSS file).
Add important to evey line of CSS in the #media query (not recommended)
Example:
#media (max-width:1023px) and (min-width:768px){
body{
color: #000 !important;
background-color: #fff !important;
}
}
body{
color: #fff;
background-color: #000;
}
Related
When I am in laptop/desktop view, the regular CSS styles are crossed out in the inspect element, and the query styles are active. Why is this happening?
For example, my code for the nav section (where my primary concern was at first, because that's all I've managed to get when targeting certain elements so far, responsively, before I noticed this issue) is below.
I've tried making sure the element names, div's, and id's.. all that are exact. I've also used percentages and pixels, both all the same and interchangeably. I've also made sure that I don't have two identical min-width media queries, that would cancel out one of the two.
CSS
/* Nav Section */
a.navbar-brand{
font-size: 90% !important;
}
/* About Section */
.mlAboutSec{
padding: 112px 0;
background-color: #f9f9f9;
}
.mlAboutSec h1{
font-size: 40px;
}
#media screen and (min-width:320px){
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive{
width: 50% !important;
}
a.navbar-brand{
font-size: 90% !important;
}
}
Html
<div class="mx-auto order-0">
<a class="navbar-brand" href="#">Sample Logo Text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="jumbotron jumbotron-fluid text-center">
<img src="LogoImage.png" class="img-responsive" alt="Logo Image">
</div>
<div class="col-sm-8 fadeInUp animate">
<h1>About Section</h1>
<p>Sample Text Description about stuff goes here for the reader to view.</p>
</div>
I expected both font sizes to be reduced in size for mobile readability as well as the logo image to be scaled down for better mobile viewing purposes.
You say that your default styles are being overridden on desktop with your mobile styles, and if we inspect your styles, we can see why.
Right after you declare your normal styles, you then include a media query that says min-width: 320px.
.mlAboutSec h1 {
font-size: 40px;
}
#media screen and (min-width: 320px) {
.mlAboutSec h1{
font-size: 20px !important;
}
.img-responsive {
width: 50% !important;
}
}
This means your media query styles will kick in for any screen that is at least 320 pixels wide – even a desktop that is substantially more than that wide. In fact, in reality, your normal styles are never going to be applied because they would only happen between 0 and 319px wide, and even some of the smallest smartphones on the market (e.g., iPhone SE) are 320px wide.
If you want to declare default styles for desktop and override them on mobile, the simplest thing to do would be to simply switch out min-width for max-width in your media query, and nothing else would need changed; everything would work exactly as you expect.
However, I see in the comments that you are going for a mobile-first approach. In that case, you need to invert your entire approach. Your mobile styles would be the default ones, and then your desktop styles would go in a media query.
For example:
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 50%;
}
#media screen and (min-width: 992px) {
.mlAboutSec h1 {
font-size: 20px;
}
.img-responsive{
width: 100%;
}
}
Another thing to note, since I saw discussion in the comments about the possibility of simply moving your media queries to the top of your stylesheet: While it's true that CSS cascades down the sheet, so styles lower down will override styles higher up, that's only true if the selectors for those styles have equal specificity. Media queries are more specific than normal styles and as such will end up overwriting your normal styles whether they're at the top or the bottom of the stylesheet, all else equal. (Which is to say that if you add in an !important or change from .mlAboutSec h1 to .mlAboutSec.someOtherClass h1 or something else, things get more complicated.)
In order to maintain simplicity, I would suggest you keep the media queries at the bottom of the stylesheet or at least immediately following their respective default styles and then use one of the two approaches above to modify things appropriately so things come out as you expect.
Note that in the example I have above of a mobile-first approach, no !important is needed anywhere because the selectors are all exactly the same inside and outside the media query and the media query comes after the default selectors, leaving no disagreement between specificity and the cascade.
So what I did was just change the font sizes for all the text/headings/links to still be easily read on all devices. Turns out that's all I really had to do and the scaling works, oddly enough. Thank you all for all the helpful input. I took every bit into account!
I'm trying to make our web page device responsive with #media. However, I get the errors "Expected RBRACE at line 44, col 3." and "Unexpected token '}' at line 48 col 1.", even though the code looks fine to me. Does anyone have a solution to this?
I've tried to fix the code according to the errors, but that just messes up the #media-portion of the code totally. I've also ran the code through code examiners and the errors remain.
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
#media (min-width: 480px) {
width: 70%;
margin: 0 auto;
}
}
My goal is to put the code above in css and then use
<div class="content">text goes here</div>
to make our texts look better. However, because of the errors in the css, the div class-line does not have any effect.
You cannot nest a #media query inside vanilla css like this.
You should re-write your css to look like this:
/* outside the media query */
.content {
font-family: 'Lora', sans-serif;
font-size: 48px;
}
#media only screen and (min-width: 480px) {
.content{
width: 70%;
margin: 0 auto;
}
}
Only replace rules where necessary. This will reduce the amount of code you have to write. Also, have a look at https://sass-lang.com/, it will make writing css much easier!
As a general rule of thumb, I tend to place all my #media rules at either the bottom of the stylesheet or in another stylesheet. The idea is that you specify the generic rules at the top of the page (like font-size, font-family, width, etc) then only when you need to, specify what should change and at what viewpoint (like the code I have provided).
Let me know if this is unclear for you!
We have an element with a page-wrapper id. I have tested that changing the margin on this element does, in fact, remove the margin on the actual page:
#media (min-width: 768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 220px;
}
}
My goal is to keep the margin for the standard page, but remove it when printing, so I tried this:
#media print
{
#page-wrapper
{
margin: 0px !important;
/*display: none !important;*/
}
}
The display:none comment there is just to show that it does, in fact, hide that element for printing, it was there a part of my testing. However, the margin does not get changed like it should.
I am out of ideas on what I might be doing wrong, so I am hoping someone has an idea. We do NOT have any other #media print styles on the page, but do have other #media min-width styles, but as far as I know #page-wrapper should override them all for print.
Any ideas?
Edit: Setting background-color:red; doesn't seem to work as well, only hiding the element from view with display: none works.
Edit 2: I do set the #media print absolutely last in the stylesheet, not that it should matter since it's the only print style and uses !important, but still worth mentioning as one more thing to check off.
Edit 3: When inspecting the element, the only margin style applied is the style shown in the first code snippet. The #media printstyle does not show up at all when inspecting the element.
When I needed to tackle something similar, I created a PDF of the section of the page first and then I could print it if I wanted or I could email it instead. To adjust the margins for a PDF, you would use the #page selector. So, my embedded CSS would be:
#page{margin:120px 50px 80px 50px;}
It may or may not work as I haven't tried printing directly from the page, but that may offer another route to the same end goal.
I have the website markedsføring på pizzabakker and I just can't figure out how to change the <h1> to be smaller on smaller screens. Can anyone please help me with that?
My CSS for the <h1> right now is just this:
font-family:'Coustard', sans-serif;
margin:0;
padding:0;
font-weight:300;
What should I do?
Matteo's code is correct. Try putting the code after the original h1 style.
If that doesn't help, try with:
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px !important;
}
}
The other solutions are right but you can also try with this one. Alter the current CSS code to have 5vw unit which means it will autmatically calculate 5/100th of viewport width.
h1 {
font-size: 5vw;
}
You can use media queries.
The #media rule is used to define different style rules for different media types/devices.
In CSS2 this was called media types, while in CSS3 it is called media
queries.
Here is an example
#media screen and (max-width:360px){
h1{
color:white;
font-size:25px;
}
}
See this for information.
To develop responsive website I also suggest you to see Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.
the print media css that is not working is this:
#gc {
width: 100%;
}
#asideTrack {
/* width: 100%;*/
display: none;
}
.asideTrack {
/* width: 100%;*/
display: none;
}
.slideAside {
/* width: 100%;*/
display: none;
}
#slideAside {
display:none
}
Any suggestions?
In CSS lower rule overwrites the top if they have the same priority (depending on selector)
You write your common css not in #media block, and it is lower then your #media print block, so it overwrites your #media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of #media print block where you say it is 100%).
I hope it is helpful.
Solutions
In your css file you may place media print block to the end of file.
Add !important directives to some rules in media print block. ie:
p {
color: red !important;
}
Place your special css for screen in media screen block.