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%;
}
/**************/
}
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...
It worked before but all of a sudden it stopped working :(
#media only screen and (max-width: 768px) {
form,
button,
input {
width: 80vw !important;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1">
I have html, css and js code included in the link below:
DEMO: CodePen
The problem is an invisible special character inserted into your code.
It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.
If you copy and paste the code into Notepad, you'll see it.
In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)
The simple solution is to just delete that media query and re-type it.
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" />
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 8 years ago.
Improve this question
i am facing a problem. I have a simple wap-site http://tornet.ml. On mobile devices, the site is perfect; but when browsing it on a PC, the images appear atrocious. I am using relative sizes (%) instead of absolute (px) to resize images, as it changes according to the screen. Is there any way to make these more perfect than they already are?
Any help would be really appreciated.
You are facing a problem, where you would like the layout of your site to change depending on what kind of screen it is shown in. The layouts which are able to do so, are called adaptive or responsive layouts and it can be done with some advanced CSS knowledge.
Check this fine article: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
Of course, there is no real need to implement everything on your own - there are many different frameworks to choose from.
Check this list for starters: http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
However, a simple workaround for your particular case would be just to limit the width of your content, so it won't stretch on laptops/pcs. To see what I'm talking about change your <body> tag to <body style="width:500px;">.
You can consider using something called Media Query which allows you to have different stylesheets for different devices used to access your website. Inside a <style> tag, you can write something like the following:
#media screen and (min-width: 400px) {
h1 {
background: black url('test.jpg') no-repeat 50% 50%;
}
}
which means that the stylesheet is applicable only to screens greater than of width 400px.
You can also specify external stylesheet using the following syntax:
<link href="screen.css" rel="stylesheet" media="screen">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 480px)">
And in the former stylesheet, add CSS for desktops and in the latter one, usually for mobile devices. For more on Media queries: http://www.w3.org/TR/css3-mediaqueries/
Also, try not using % rather than pixels, use pixels but change them according to the device being used.
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!