I have written media query to override library CSS but ins't working.
I am using primeng lib 14.0.2.
This is the code snippet:
#media screen and (max-width: 600px) {
.p-button {
height: 2rem;
}
}
From my experience the media queries only work if you have a viewport meta tag
in your html.
<meta name="viewport" content="width=device-width,initial-scale=1">
There is an explanation here Beginners Guide to Media Queries. Read the section titled The viewport meta tag. It says
This is needed because by default, most mobile browsers lie about their viewport width.
Related
So the situation is a little bit weird because there are alot of questions already been asked on media queries but unfornulately I couldn't find my way in most of them. Actually I am working on a simple website and I wrote a media which looks like this.And notice that sass also notifies me that no grid-area have been specified for the grid-template-areas present in the media whereas I specified it out of the media on top.And just for a precision my media is at the bottom of my code.
#media (max-width: 769px) {
.top-container {
grid-template-areas:
"showcase showcase"
"top-box-a top-box-b";
background-color: green;
}
}
but it doesn't work,even with the meta Tag and the viewport specified.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Thanks...
I need to do some scaling of the page and prevent it from closing in when keyboard shows up on mobile devices. Also it should work on a wide range of screens. To do so I use viewport meta tag. I figured a workaround where I fix the innitial-scale, maximum-scale and minimum-scale to one value which I calculate in JS. Is there a way to calculate this value and assign it in CSS? Can, and should I access meta tag from css? I've actually tried to do that but it didn't seem to work. Code below:
JS:
if (screen.width<1024){
var a = screen.width/window.innerWidth;
var txt = "width=device-width, user-scalable=0, maximum-scale=" + a + ", minimum-scale=" + a;
document.getElementById("viewportMetaData").setAttribute("content", txt);
}
HTML:
<meta name="viewport" id="viewportMetaData" content="user-scalable=0">
CSS:
#media all and (max-width: 1024px) and (orientation: landscape) {
#viewport {
min-zoom: width/(100*vw);
max-zoom: width/(100*vw);
user-zoom: 0;
}
Meta tags are not meant to be changed or affected by Css Classes. That is in contrast with the definition of Meta tags (https://www.w3schools.com/tags/tag_meta.asp).
However, if you want to solve your issue, you may be adding an event listener to the main window using javascript and whenever the window is resized, it changes the viewport value.
The answer to your second question is no, you shouldn't. But it will probably be more useful for you to try understanding the relationship between the viewport tag and media queries, which you can learn more about here. Also, as to deciding how to approach viewports vs. media queries during development, you may find these answers helpful as well.
As to your first question, without seeing your exact issue, it's hard to point to a specific solution. However, if this is mostly an Android issue, the following media queries may be useful in resolving your screen-width issue while the keyboard is present:
Portrait view:
#media screen and (max-aspect-ratio: 13/9) {
/*
focus on element styles in portrait view, not meta tags
*/
}
Landscape view:
#media screen and (min-aspect-ratio: 13/9) {
/*
focus on element styles in landscape view, not meta tags
*/
}
I'm trying to find a way to make my typography responsive. My code will follow. Whenever I refresh in dev tools this doesn't seem to have the desired result. How can I get a good result to have text displayed well on phones, tablets and laptop/desktops?
#media only screen and (min-width: 320px)
{
html {line-height: 1.25em, font-size: 16px;}
h1{line-height: 1.25em, font-size:32px;}
h2{line-height: 1.15384em, font-size:26px;}
h3{line-height: 1.136363em, font-size:22px;}
h4{line-height: 1.111111em, font-size:18px;}
}
I use rem instead of em On my projects. The difference between them is that rem is looking always to the root of the document, in this case html.
Then on my css i have:
html {
font-size: 1rem;
#media (min-width: 320px) {
font-size: 1.2rem;
}
#media (min-width: 760px) {
font-size: 1.5rem;
}
}
That way all the font-size inside <html> will change in the right way.
Did you set your viewport meta tag in your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1">
Also, Why don't you use REMs for this to make it more simple? You could specify the initial html font-size and line-height and then change the REM value for each query. Read: https://css-tricks.com/confused-rem-em/
There are a number of ways to do this and it starts with the design. Where do you decide to change the values for font size and line height? What looks good and when does it start to look bad?
When you widen the browser window and it starts to look bad, that is your break point of when to change the values using media queries or javascript. In fact, there is a javascript library to help you do such things (but the name escapes me at the moment).
Thus is the venue for the web developer to create those media queries that change the values to what looks good to you, the designer.
You could use the css calc function.
font-size: calc(1em + 1vw);
As talked about here
https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/
I know there are 2 ways to add Media queries:
HTML LINK:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
CSS:
#media all and (max-width: 1024px) {
......
}
I have read the documentation and I understand the obvious difference between the 2 methods. However, the following are 2 questions I am in doubt about if you can clarify please:
Does the browser handle the HTML Media Link differently to the CSS Media Query? What I mean is, I know if CSS media queries are added inside css, all the css files are downloaded to all devices anyways and only the respective media queries are taken into effect when the browser interprets the compiled css. But if the Media Link is added in HTML, does it mean that browsers will only download the foo.css only when for devices with matching specified width? Is there a difference in the way browser handles the HTML media links when compared to Css media queries or is it all the same but just different ways of adding to the webpage?
Lets say if foo.css also has media queries for smaller widths other than 1024px, something like this:
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
If the above file is added using HTML Link like this:
<LINK REL="stylesheet" TYPE="text/css" MEDIA="(max-width: 1024px)" HREF="foo.css">
Would this become nested media query the way browsers look at it? What I dont understand is, if the above is added using html link, I dont know if the browser will actually look at it like this which becomes invalid:
#media all and (max-width: 1024px) {
body {
padding: 10px;
}
#media all and (max-width: 900px) {
body {
padding: 5px;
}
}
#media all and (max-width: 800px) {
body {
padding: 0px;
}
}
}
So my question is, if I have further media queries inside the css file that is added using HTML media link, is that valid?
EDIT:
I had a look in the developer tool using chrome from my desktop and I can see that the tablet files are downloaded even when browsed from a desktop device:
So for question 1, is it safe to assume all browsers included older ones and mobile browsers do the same thing i.e download all files even if they are placed at HTML links?
For question 2, I can see that chrome does use the media queries that are inside tablet's css when the browser screen is resized to tablet width. The css file linked for 1024px in html are taken as media="(max-width: 1024px)". But then, wouldn't that mean the media queries placed inside tablet's css file are actually nested media queries? Although it works, isnt it logically wrong? Does some stricter browser not consider this as valid?
Here is what W3C has to say about this:
The media attribute says which media the resource applies to. The
value must be a valid media query.
[...]
However, if the link is an external resource link, then the media
attribute is prescriptive. The user agent must apply the external
resource when the media attribute's value matches the environment and
the other relevant conditions apply, and must not apply it otherwise.
Note: The external resource might have further restrictions defined within
that limit its applicability. For example, a CSS style sheet might
have some #media blocks. This specification does not override such
further restrictions or requirements.
I tested the behavior in Chrome using the following markup:
<link rel="stylesheet" href="ge-960.css" media="screen and (min-width: 960px)">
<link rel="stylesheet" href="lt-960.css" media="screen and (max-width: 959px)">
Apparently, Chrome downloaded all CSS files regardless of screen resolution.
However, it applied the rules from matching stylesheet(s) only
And it honored all matching #media rules within the stylesheet
Regarding the stylesheet download, here is what the current spec draft says:
User agents should re-evaluate media queries in response to changes in the user environment, for example if the device is tiled from landscape to portrait orientation, and change the behavior of any constructs dependent on those media queries accordingly.
This means you can’t just evaluate each media-query and then download the appropriate stylesheets because the environment can change, causing the re-evaluation of these media-queries. I think it could be optimized, but for now all browsers download all stylesheets, regardless of media-queries.
For your second question, specs don’t mention any difference between HTML- and CSS-declared media-queries. Nested media-queries are allowed since CSS3, and putting #media-rules in a stylesheet which is already tagged with media="…" should be the same as a pure CSS nested media-query.
With HTML media queries, the CSS files are downloaded whether or not the media query is satisfied or not. But the prasing of unwanted CSS is kind of deferred and this advances your initial render. In a way, you can think of making it, non-render blocking. But with CSS media queries, they are completely parsed and processed whether or not the query is satisfied.
Okay,
I know there are a lot of questions out there on CSS media queries and meta viewport tags for responsive websites. I've read through a ton of them, but I'm not having any luck.
I have a website, a portfolio website, that I had responsive. One day, the responsive stuff just stopped working. I started looking into it and just have had no luck. I've made sure to use the meta viewport tag, but that's just not doing anything. Here's my <meta> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
and one section of the responsive CSS file:
#media screen and(max-width: 800px){
/*body:before{ color: #fff; content: 'Max-Width: 800px'; }*/
.social-media a,
.social-media iframe{
margin-bottom: 10px;
}
.level2{
height: 140px;
}
}
I've also tried with and without this bit of code:
#-o-viewport,
#-ms-viewport{
width: device-width;
}
The frustrating thing is that at work I just finished a responsive site and had no issues. I figure maybe another set of eyes may be able to catch something that I haven't been able to.
You can see the website at pjlamb12.github.io, and it will look fine in a desktop but not like I want it to on any mobile devices.
Thanks!
P.S.
I don't know if this matters, but the site is on GitHub pages, and I'm using Jekyll to run the site.
EDIT
The rest of the code can also be seen in GitHub here https://github.com/pjlamb12/pjlamb12.github.com
Okay, I figured out the problem. Really stupid, small problem. It was in my media queries line; here's what I had:
#media screen and(max-width: 800px){
/* styles */
}
But what you have to have is:
#media screen and (max-width: 800px){
/* styles */
}
Did you notice the difference? It took me a few minutes, but there HAS to be a space between the and and the ( on that first line.
Hopefully if anyone else has this issue, they'll see this and try it first thing.
Thanks!