Good afternoon,
I am trying to make a website of mine responsive but i can't get it to work. I have been googling for about an hour or 3 and i am almost sure i am not doing it wrong but yet it does not work.
Here is my code:
#media screen and (min-width: 1230px) {
}
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
the best way i can best describe the problem is when i visit my website with browser in fullscreen it loads normally like i want it to but when i shrink the window it should load the other part of the css but just doesn't load any css. i putted display:none in there so that the page is white to see if it works.
I have
<meta name="viewport" content="width=device-width" />
in my html.
Url of the site: http://www.biebvragen.nl
Not sure if a allowed to answer my own question but it works now!
Instead of:
#media screen and (min-width: 1230px) {
}
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
I changed it to:
#media screen and (min-width: 750px) and (max-width: 1229px) {
body{
display: none;
}
}
#media screen and (min-width: 1230px) {
}
And it seems to work fine now!
It works well with iceweasel on my linux, try with another browser or do a Ctrl + F5 refresh.
Maybe cleaning your cache can be the solution too, but your code works well, it's not a css problem, or it shouldn't work on my browser too.
Related
SO i have designed my first site for a desktop and it works fine on desktop.
I am trying to re-design this for mobile/make it responsive.
I am doing this u=by using the style sheet and putting a condition in.
here is the condition:
#media only screen and (max-width: 375px) {
body{
background-color: red;
}
}
However, when i do this i cant get anything to change for a iphone x (or anything else with a width of 375)
my style sheet is still linked fine - i can change the background on the desktop site fine. I cannot change anything only on the mobile site using this code so im guessing it is something to do wiith the media tag.
Thanks for any help!
<meta name="viewport" content="width=device-width, initial-scale=1.0">
you can check if you have put this statement or
#media only screen and (max-width: 899px) {
body{
background-color: red;
}
}
everything looks good, I guess you have css specificity issue,
try to add !important like,
#media only screen and (max-width: 375px) {
body{
background-color: red!important;
}
}
and try to use responsive things in the neath of CSS styles.
Making webpages responsive using max-width
Try this:
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue. */
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive This should work for your iPhone */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
This should look like this:
Also, make sure this exists in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Read more about this here
Seems fine to me, but you might want to consider using this instead:
#media (orientation:portrait){
body{
background-color:red;
}
}
Don't forget about css specificity. For testing, the devtools in firefox are pretty good. You can simulate a phone by pressing Ctrl+Shift+M. It's called responsive Design mode and is made precisely for situations like yours where it's not 100% clear what is causing the problem.
Alright, I'm at a complete loss. I've scoured the internet for a solution and it seems the only one thats working for people is this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Problem is, I already have that in my header on all pages. The media queries work just fine on my index.php page, but when I style my other pages everything works except mobile. That is, tablet and desktop styles just fine. I have the standard
/*----Mobile Styling----*/
#media only screen and (min-width: 768px) {
/*----Tablet Styling----*/
}
#media only screen and (min-width: 1000px) {
/*----Desktop Styling----*/
}
I'm at a complete loss, all of my brackets are closed, and my CSS looks alright. Anything else it could be?
It depends what browser you are using on your smartphone. If you use only, it will block all older browsers from smartphones. So in this case try using:
#media (min-width: 768px) {
/*----Tablet Styling----*/
}
#media (min-width: 1000px) {
/*----Desktop Styling----*/
}
Write your media Queries like this. and put your media queries at the end of your main css.
eg. if your fonts size for desktop is 14px and for mobile its 10px. than in your css when you writes 14px should come first and than in media queries for mobile write 10px. Mismatch in ordering could be the problem in your code.
#media(min-width:320px) and (max-width:479px) {
//Mobile Portrait
}
#media(min-width:480px) and (max-width:767px) {
//Mobile Landscape
}
#media(min-width:768px) and (max-width:991px) {
//Tablet Portrait
}
#media(min-width:992px) and (max-width:1199px) {
//Tablet Landscape
}
#media(min-width:1200px) and (max-width:1600px) {
//Desktop and bigger devices
}
This is a site that I am coming into after the developer quit. I have got everthing done but I noticed that it no responding below 480.
Here is the site
Here what I have in the head
<meta name="viewport" content="width=device-width, initial-scale=1">
Here the css for that part:
#media only screen and (min-width: 321px) and (max-width: 480px) { There some css in here }
This is a custom template for wordpress that someone created. So I am at alost I have worked many hours trying to figure out what is wrong with it. I hope someone can help PLEASE!
This should answer your question:
#footer .partners {
float: none;
width: 494px;
margin: 0 auto;
}
This div is never going to get any smaller than 494px. It also will not let it's parent(s) get below the width of it's widest element, which is this one, which is why the entire site will not go below this width.
What this CSS is saying is that the rules said in your media query will be applied when the width of the screen is between 480px and 321px. If that is what you are trying to do, it seems to work fine. Here is some test CSS and the JSfiddle result (resize the JSFiddle window)
#media only screen and (min-width: 321px) and (max-width: 480px) {
body {
background: red;
}
}
Can you be more specific in what your trying to achieve, it seems to work fine for me.
I've seen a lot of posts about nesting media queries in LESS so I dont want to repeat any of that or waste anyones time but my question is slightly different. I have a nested media query inside a .less file with this code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
So that is on my login.less so my login page will be more responsive. I want to make another page responsive as well so in my aboutMe.less I also added the same code:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
but its not triggering at all. Can you not have two media queries of the same type in css? So I would need to make a .less file mediaqueries.less and only have one instance of this:
#media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}
and put all the sites code that I want that query to trigger in there, or is it possible to add the same query anywhere you want inside nested less files and im just doing something wrong?
Thanks!
CSS supports multiple identical media queries, if you like, but CSS doesnt support nesting.
LESS, on the other hand, does support a few methods for nesting media queries. You can read about it here: http://lesscss.org/features/#extend-feature-scoping-extend-inside-media
Example:
#media screen {
#media (min-width: 1023px) {
.selector {
color: blue;
}
}
}
Compiles to:
#media screen and (min-width: 1023px) {
.selector {
color: blue;
}
}
LESS also supports nesting media queries below selectors like this:
footer {
width: 100%;
#media screen and (min-width: 1023px) {
width: 768px;
}
}
Compiles to:
footer {
width: 100%;
}
#media screen and (min-width: 1023px) {
footer {
width: 768px;
}
}
If this doesnt answer your question, then please post the relevant part of your LESS file(s).
For media rules on less my recommendation is use Escaping.
Sample
#min768: (min-width: 768px);
.element {
#media #min768 {
font-size: 1.2rem;
}
}
I added #media screen css in an effort to change my website but it doesn't seem to be responding. I added meta name = "viewport" content="width=1200, width=device-width" to the HTML and that was the only thing that effected the way my site looks on my phone. In the CSS I added the following but it has no effect.
#media screen
and (max-device-width: 768px)
and (orientation: portrait) {
body {
max-width: 600px;
}
#sidebar {
width: 0;
}
}
#media screen
and (max-device-width: 1000px)
and (orientation: landscape) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
So how do I:
Get this to work, is my CSS wrong?
Is there a way to specifically get rid of the #sidebar in #media screen css?
Try This (Not Tested)
#media handheld and (orientation: landscape),
screen and (max-width: 1000px) {
body {
max-width: 800px;
}
#sidebar {
width: 0;
}
}
It is possible that an old version of your CSS file (before your changes) has been cached by your phone. If you have PHP, a nice way to get around this is:
<link rel="stylesheet" href="styles.css?ver=<?php print filemtime('styles.css') ?>">
That way, the stylesheet is only redownloaded when it needs to be.
If you don't have PHP, you can always just change the ?ver= paramater by hand each time you make a change in your CSS file.
This may or may not be your problem, I don't know. But it might help.
Code looks alright to me. Have you tried to do a hard refresh?
shft + f5 to my experiences fixes CSS when you don't notice a setting applied. Also deleting the cache helps too!
Also to get rid of #sidebar
#sidebar{
display:none;
}
will hide it when you hit your #media.
Hope that helps :)
#media works for everything. e.g my phone has a width of 720px for eg. when you have CSS #media for mobile at 720px; the following CSS will apply if that makes sense. Should read on mobile first responsive design if that's what you're trying to achieve, but that's a whole different topic. As for the code in your #media, you are targeting mobile devices, not laptops/computers. Incase you're not aware of that. so if I'm thinking right the CSS will apply only to mobile devices. For laptops/pc, #media (max-width: xxxpx) {} would do it :)
Thank you to Akira Dawson for the display portion. It appears that I needed to get rid of content="width=1200" for it to display properly on my iPhone. In addition what I ultimately did was got rid of #media screen and changed it to #media handheld for it to take effect on my iPhone. For whatever reason #media screen would not work. It's interesting because I was told #media handheld doesn't work on the iPhone but apparently it does.
As far as I understand it content="width=1200 says that your site needs a viewport of at least 1200px which is contrary to max-device-width: 768px
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> should probably fix your problem.
source: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag