I am working on an Angular 8 project and I am trying to apply a media query in a component :
#media only screen and (min-width: 1024) {
.content {
max-width: 65%;
padding: 30px 20px 0;
}
}
In my index.html, the viewport is set :
<meta name="viewport" content="width=device-width, initial-scale=1">
But the media query isn't recognized. When I analyzed the CSS applied, the media query isn't here.
Thank you very much!
Try to add px or em to '1024'.
#media only screen and (min-width: 1024px) {
.content {
max-width: 65%;
padding: 30px 20px 0;
}
}
Related
So im just testing some media queries for scss in my webpack project.
I've just got a simple div within the body, and want the background to change depending on the width of the screen.
My two smallest media queries, small & xsmall, just don't apply, and I can't figure out why.
No matter how narrow I make the screen, the background stays green below 900px
$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
.test-class {
width: 100%;
height: 100%;
#media (min-width: $xsmall) { <--- Doesn't Apply
background-color: purple;
}
#media (min-width: $small) { <--- Doesn't Apply
background-color: pink;
}
#media (min-width: $medium) {
background-color: green;
}
#media (min-width: $large) {
background-color: yellow;
}
#media (min-width: $xlarge) {
background-color: blue;
}
#media (min-width: $xxlarge) {
background-color: orange;
}
}
}
Sorted it.
Was using a generic HTML boilerplate and not the full one provided by VSCode.
Added:
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and that resolved it.
This question already has answers here:
Why does the order of media queries matter in CSS?
(2 answers)
Closed 2 years ago.
I;m trying media query in scss but is not working. I have code like this
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 459px) {
body {
background: black;
}
}
</style>
now no media query is working for width 459px and background is red... (black is on max 458 and yellow on 460)
but when I changed to
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body {
background: red;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
#media (max-width: 460px) {
body {
background: black;
}
}
</style>
then black background is working for 459px but on 460px two media queries are working...
how to fix that on max-width I will have only black background and on min-width only yellow?
I would do it differently: Define a general rule first and then one media query for smaller screens, like this:
body {
background: yellow;
}
#media (max-width: 460px) {
body {
background: black;
}
}
Or the other way round, using a mobile-first approach:
body {
background: black;
}
#media (min-width: 460px) {
body {
background: yellow;
}
}
Both ways there is certainly no width where two seetings would collide, and no width where no setting would apply at all.
I am using media queries to change the font size of some text on my site. However it is not working as I understand them to work.
p {
font-size: 3rem;
#media (min-width: 768px) {
font-size: 2rem;
}
#media (min-width: 992px) {
font-size: 1.5rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}
Currently the min-width: 768px applies to everything under 992px. For example at 440px width it still has a font size of 2rem. The 3rem font size is never used. One interesting thing to note is that this is only happening in Chromes Responsive device tester. If I make the actual window small then it works.
Since you're going mobile first (using min-width) you are supposed to apply lowest size first.
Try with:
p {
font-size: 1.5rem;
#media (min-width: 768px) {
font-size: 2rem;
}
#media (min-width: 992px) {
font-size: 3rem;
}
max-width: 1600px;
font-weight: 300;
margin-right: auto;
margin-left: auto;}
make sure you include in your <head> this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Source: Css tricks
I'm working on making a site mobile friendly, and when I put in the meta tag for viewport it's not recognizing it at all.
I'm still working on media queries, but the viewport isn't doing anything at all.
Site: http://gc200298785.computerstudi.es/test/
Source Code: view-source:http://gc200298785.computerstudi.es/test/
Thank you in advance!
Kayley
It is working fine only. I noticed your css.
#media screen and (max-width: 320px) {
/*main*/
body {
font-size: 16px;
line-height: none;
width: 100%;
}
.container {
max-width: 90%;
padding: none;
margin: 0 auto;
}
a .inside-container {
max-width: 25%;
}
nav {
width: 25%;
}
nav li{
display: inline;
}
#menu {
max-width: 100%;
}
}
add below the code in your css
.container, #paper, #landing, #paper-bottom{width 100%;}
Try adding;
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Also best practise is to start your css as mobile/ responsive, so in other words dont wrap it in a media query.
Then for desktop start a media query under the main mobile/ responsive css
#media screen and (min-width: 800px) //or what ever size you want {
// insert your styles here
}
You will find that it is a lot easier to approach your development this way.
My webpage uses multiple sections. I have the .header section set to 1050px which is perfect for desktop viewing, but when viewed on a mobile device the elements inside overflow into the next section.
How can I seamlessly change the section height for mobile viewing so the elements don' overflow?
Other ideas are welcome as well.
Here is my CSS for the section:
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
height: 1200px;
}
Here's one option for you: http://codepen.io/panchroma/pen/BulnL
I'm using media queries to set different CSS values as the viewport of window width changes. The css is easy to follow and for this to work reliably, you need to include a meta tag similar to the following in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I've used min-height instead of heght to control the div sizes, because it's more flexible, for example it will probably give better results if a user has a large font setting.
The break points I've chosen for the media queries viewport widths are for illustration only, customise these to fit the specifics of your design.
Good luck!
CSS
.header-14-sub {
color: #bdc3c7;
background-color: #1c201d;
position: relative;
padding-top: 95px;
padding-bottom: 95px;
min-height: 900px; /* set default height */
transition: all 0.5s ease; /* optional css transition effect */
}
/* For media queries to work on smartphones, be sure to add a meta tag similar to the following
<meta name="viewport" content="width=device-width, initial-scale=1.0">
*/
#media (max-width: 480px) {
.header-14-sub {min-height: 300px;}
}
#media (min-width: 481px) and (max-width: 767px) {
.header-14-sub {min-height: 500px;}
}
#media (min-width: 768px) and (max-width: 979px) {
.header-14-sub { min-height: 700px;}
}
#media (min-width: 1200px) {
.header-14-sub {min-height: 1200px;}
}