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.
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.
I've got a quite strange error and I seriously can't figure out what I did wrong.
Currently I am working on a responsive website project with media queries.
After weeks of working I just realized that my media queries are not working in Safari but everywhere else.
Some examples of my CSS
#media (max-width: 1138px) {
.column-2 {max-width: 32.4%;}
}
#media (max-width: 950px) {
.column-2, .column-1 {
max-width: 17.9%;border-left:1px solid #e5e5e5;
}
}
#media (max-width: 640px) {
.column-2, .column-1 {
max-width:100%;
border-bottom:1px solid #e5e5e5;
height:20%;
width: 91%;
}
footer div.left, footer div.right {
width:100% !important;
}
}
Viewport Added in HTML head section
<meta name="viewport" content="width=device-width, initial-scale=1">
I've also tried with #media screen only and (...) {}. Still not working.
Any ideas what I'm doing wrong?
Your first breakpoint is missing the closing bracket after "max-width: 32.4%".
I'm not sure if this is the fix but it looks like you're missing a closing bracket after "32.4%" and possibly the "screen" part of your media query. You're not defining the range of what the media query handles. Here's a sample of a media query I wrote on a website I did (http://bonjourproject.com/):
#media screen and (max-width: 600px) {
.bottom {
width: 400px;
}
}
be sure to add "screen and" and see if that works for you.
Note: "screen" is not the only option here there are many more to choose from, but "screen" is pretty common. Let me know if this works!
Without seeing the full stack of your css/html there are many possibilities why this is happening but since its working on the other browsers and not iOS go and try adding this just to test and see if Safari picks it up:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* put webkit CSS here*/
}
If still nothing then you need to check you html head syntax and css tag make sure there is no typo...try using console. This will at least help me/everyone figure what other steps you need. and as I mentioned try adding something basic in fiddle for us.
I am developing a website with a desktop and iPhone 4 viewport. When I am doing the bulk of development and viewing it through my desktop's browser using a viewport chrome extension, it is rendered fine and looks good. But when I view it on my iPhone 4s the width is corrupted. I have no logic that tells it to act like this. I cannot see what the issue is, was wondering if anyone could think of some possible problems?
Desktop (at 320 viewport): -----
iPhone 4S:
Query used for the .container{} class that wraps the entire site.
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (min-width : 320px) {
.container {
width:75%;
}
}
Many thanks for your help.
You likely have two problems at work here that are unrelated to your .container. Why do I think this? Your menu is showing up nice and large but your other content isn't. You said .container wraps everything. So we shouldn't be seeing a discrepancy there.
So, you're two problems are likely related to:
You're probably missing some meta tags in your <head>. It looks like media queries seem to be working for you, but your scale is off. Try adding in <meta name="viewport" content="width=device-width, initial-scale=1">
Your menu styles. Do they have a set size? Is there a media query that's adjusting it?
Without seeing the menu styles, I can't really say what exactly is wrong there...
use this code for iphone 4
Screent width Between 320px to 480px
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media and (min-width : 320px) and (max-width : 480px) {
.container {
width:75%;
}
}
Else use below code for <320px widht screen
.container {
text-align: center;
margin-left: auto;
margin-right: auto;
}
#media (max-width : 320px) {
.container {
width:75%;
}
}
And your mistake is, You wrongly put min-width : 320px instead of max-width : 320px
More...
My best guess is that it's something to do with the Retina display. The viewport on your desktop measures pixels on an ordinary display. On a 4s 320 pixels are not actually full screen - instead it's 640. You should check out the device pixel ration query http://css-tricks.com/snippets/css/retina-display-media-query/
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
I'm trying to use media-queries in my CSS for the first time, but I don't seem to be having much luck getting it to work.
To test, I wanted my #page-wrap to resize to 440px when something like an iPhone is looking at the page, but nothing changes.
This is what I've used.
#media only screen and (max-device-width: 480px) {
#page-wrap {width:440px;}
}
I also put this in my header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Is this correct?
Is there a specific reason you're using max-device-width? Unlike max-width, it will not help with people rotating their device or other types of adjustments.
Instead, stick to using max-width, like the following:
#media only screen and (max-width: 300px) {
#page-wrap {
width:100px;
}
}
Check out this jsFiddle that illustrates it.
Try this for your media query:
#media only screen and (max-width: 480px) {}