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
}
Related
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.
What is the best practice to build websites than can code with different screen sizes, for e.g. when resizing browser, or even when viewing a layout designed for desktop browser sizes such as 800X600 or more. I'm more a backend developer, now, I'm having to build a web application where I want to use jquery mobile. I just want that the layout changes for desktop as well. So far, I'm only aware of media types. Is there any better solution like a framework something. Thanks
you can either use client side media-queries in css to specify the behavior
#media-query(min-width:320px) {
.do_not_show_on_small { display:none}
}
MDN Media Query Info
or use the server backend and look at the user agent and send back different html...
http://www.whatsmyuseragent.com/
Then the an example of server logic like this:
if (ff8) then
send (browser_html.html)
else if (android os)
sned (mobile_html.html)
(of course this could be different templates for the same data using a template engine).
Need these on document's head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
And these are the standard Media Queries
/* #MEDIA QUERIES
================================================== */
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {
body {min-width: 768px; } /* example */
}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
body {min-width: 320px; } /* example */
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
body {min-width: 420px; } /* example */
}
Best of luck! Check my site to see how it works: www.santz.net
I am having trouble with: http://brybell.me/vipeepz/skeleton/
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
#logo {
margin-top:400px;
position:relative;
}
}
That is the media query code within the layout.css file of the skeleton boilerplate/ framework.
It does not seem to be picking up the media query, I have tried many things and it doesn't seem to be working.
There are two logos now, because I was doing some testing, but I really am just trying to do something simple similar to instagram's website. simple phone image with screenshot and then a logo and block of text beneath.
I would appreciate any and all help. Thank you very much. I have been frustrated with this because I had the site how I wanted it on desktop, but can't get things to reposition to where I want them to be.
Your inline style declaration is overwriting the media query in this case since inline styles have higher specificity. Try moving your inline styles into an external stylesheet and your media query for #logo should be picked up.
I'm redesigning my site to have two layouts based on screen resolution. One has 1000px for any screen 1010px or greater, and the other has 675px for smaller screens. Right now I'm using the following viewport tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
This setup works fine in desktop browsers and on an iPad. However, both Android and iPhone browsers do not show the page correctly, they start at various levels of zooms. Instead I want the 675px display to be shown zoomed correctly so the whole width is shown on the screen. I tried to use:
<meta name="viewport" content="width=675px, user-scalable=yes">
And it improves the iPhone version somewhat but forces the iPad to show the smaller size even though it has a 1024px wide screen. Not quite sure how to fix this.
Btw the site is http://dendory.net
Have you tried removing the initial-scale=1.0 and just have your viewport as:
<meta name="viewport" content="width=device-width">
and then use media queries for your break points in the design.
Try working with mediaqueries. It lets you target a device to apply certain css properties on. You just simply paste it in your stylesheet. I use it to create responsive emails.
Here is an example of a simple mediaquery:
#media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
I hope this helps !
You should try using #media queries. Simply apply these to your stylesheet and you can have total variable styles depending on the device, size and what you want to achieve with different devices.
e.g.
/* MOBILE PORTRAIT */
#media only screen and (min-width: 320px) {
body {
}
}
/* MOBILE LANDSCAPE */
#media only screen and (min-width: 480px) {
body {
}
}
/* SMALL TABLET */
#media only screen and (min-width: 600px) {
body {
}
}
In these you can simply apply different styles depending on the scale of the device as shown below...
/* TABLET/NETBOOK */
#media only screen and (min-width: 768px) {
body {
}
/* COLUMN GRID */
.g1,.g2,.g3 {display:inline; float: left}
/* 2 COLUMN GRID */
.g1 {width:48.0%}
.g2 {width:48.0%}
.g3 {width:98.0%}
}
/* LANDSCAPE TABLET/NETBOOK/LAPTOP */
#media only screen and (min-width: 1024px) {
body {
}
/* 3 COLUMN GRID */
.g1 {width:31.333%}
.g2 {width:64.667%;}
.g3 {width:98.0%}
}
This is very useful if you would like to have a fully interactive website for all devices. These days it is common practice to use media queries.
Also media queries are very transparent through most browsers which makes them a 'good practice' to use. Check this out!
#media only screen and (max-device-width : 640px) {
/* Styles */
}
#media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
Interaction Media Features
The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)
The pointer media feature queries the quality of the pointer mechanism used by the device.
The hover media feature queries the user’s ability to hover over elements on the page with a given device.
So to answer the question...
Mobile devices/tables are similar in that:
1) The accuracy of the primary input mechanism of the device is limited.
This means we could use the following media query:
#media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (pointer:coarse) {
div {
background: red;
}
}
<h2>The pointer media feature queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) The primary pointing system can’t hover
So our media query would look like this:
#media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59.
So to support older versions of Android you need
#media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The hover media feature queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>
Codepen Demo
NB:
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.
If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
#media (any-hover: hover) { ... }
Extra reading
Interaction Media Features and their potential (for incorrect
assumptions)
https://css-tricks.com/touch-devices-not-judged-size/
Edit Note: This is specifically a method that worked with older browsers. The accepted answer has been updated to a more modern CSS that does have media queries that makes this easy. I mainly suggest using my older code for CSS specific to older browsers.
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
However, you should use width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
So altogether, you should have something like this...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
#media (min-width: 541px){
/* Big view stuff goes here. */
}
#media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
#media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (ie 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %