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...
Related
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.
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/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to get a media query to work on mobile. I have used the proper # media queries along with min/max width sizes. It works on my computer but not on my mobile device. Also note, I have added the proper meta tag in the head.
<meta name="viewport" content="width=device-width,initial-scale=1">
#media only screen and (max-width: 480px){
#top-table{
background-color: green;
}
}
I am using a Samsung GalaxyS5 though I would like it to work on multiple devices. I am using Chrome. When I change the size of my browser it works fine, but on mobile there are no changes.
It's hard to say for sure without having any more information but a few things I can think of off the top of my head would be to check that you have properly included it below any css that you have imported, for example it would need be here:
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Another point to consider would be making sure you've linked the css, that the media queries are included in, properly. I know that sounds dumb but just make sure to double check! Finally, off the top of my head the last thing I can thing of is that you've used the media queries correctly. It is best practice to include them in a separate file, as per the example above, and make sure you know what order they go in. If you were trying to do a mobile-first platform then you would need to include them via min-width with the lowest screen resolution at the top. Or vice versa if you're doing a desktop first application. If you've double check all of this then I can only think to simply save everything and restart the program, sounds silly but I've had a number of times in several different IDE's where restarting seemingly fixed a few problems. Best wishes!
EDIT
Try formatting it like this (obviously with your own code) and see if it fixes some problems!
#media screen and (min-width: 500px) {
/*****BODY*****/
#disp2 {
display: inline;
}
#wrapper img {
width: 45%;
float: left;
margin: 2.5%;
}
#wrapper .cycle-slideshow img {
width: 95%;
float: left;
}
.secondary-content2 {
max-width: 450px;
margin: 0 auto;
padding: 2.5%;
}
/**************/
}
I have added some css media queries but it doesn't seem to make any change, I mean I have added this code
#media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}
but the left and right sidebars are still visible i have also tried changing the range of min-width and max-width it still doesn't make any difference, am i missing something here ? do i have to add something more than this in my css to make it work ?
below given is my default css for both classes
.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}
My advice would be to test the code in a real mobile phone not with a browser if that's what you are doing cause browsers behave differently
Another important thing you must do is add meta view port tag without that it won't work like the one given below
<meta name="viewport" content="width=device-width, initial-scale=1" />
Remove !important from your default css use css specificity instead if its really necessary so your default css should be
.leftSideBar{display:block;}
.rightSideBar{display:block;}
if even that doesn't work you have to show us your entire css or html to identify the problem
Everything looks fine in your code.
Try with this meta in your html :
<meta name="viewport" content="width=device-width, initial-scale=1" />
Also, if I can give you a little advice, try the mobile first way. It looks like this :
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
#media screen and (min-width:640px) {
/*design for screen-width >= 640px */
}
This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;)
here is a little / great tutorial on mobile first approach :
http://www.html5rocks.com/en/mobile/responsivedesign/
Good luck and give your html and full css if it's still not working.
The min-width and !important are probably useless. The query is fine, but it may be shortned to just:
#media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}
Should be working either way. Are you sure the html is fine? You may want to show that here as well.
This code is the best for mobile friendly responsive web:
<meta name="viewport" content="width=device-width, initial-scale=1" />
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!