I'm trying to allow my webpage to react accordingly to the media query attributes. I have searched all over the web and found this universal meta code
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
and in my CSS i change accordingly
#media only screen and (max-device-width: 720px) {
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:700px;
}
I tried it on my opera mobile emulator on both different mobile interface
WXGA Landscape 1280x800
HD Potrait 720x1280
But the homebutton of mine still remain the same size as it originally is like below
#homebutton input[type=image] {
position:absolute;
left:0%;
top:0%;
margin: 0px;
height:70px;
}
If your 700px rule (in the #media block) is above the 70px rule, and the latter applies outside of any #media blocks, then that will override your 700px rule for all media.
In order for your #media block to override the general rule, you need to move it beneath it in your stylesheet.
See my answer to this question for an explanation.
You can try to search for responsive layout as well and what I suggest is to target all the devices with the width element so try use this:
#media (max-width: 720px) {
#homebutton input[type=image] {
height:700px;
}
}
and unless you want to change some attributes on the elements you don't need to specify it in the media query.
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'm newbie and i have a site, i want to make a responsive design, it is responsive for mobile but not responsive on tablet, i want create tablet design like pc layout not mobile, can you help me how solved this problem? maybe meta viewport and css wrong code, how many px to create min or max media width?
this is my dummy site
http://silanycorp.com/a
and this site for check responsive layout
http://ami.responsivedesign.is/#
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS code
#media (max-width: 768px) {
.container{
padding:0;
}
.logo{
padding-left:0;
}
.hide-on-desktop{
display:block
}
.header-wrapper{
padding: 0;
}
.header-outer{
}
thanks for your help :)
You can have multiple stylesheets loaded based on the width of the viewport the user has.
This can be accomplished with the following tag:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You can also set it in the stylesheet with something like this:
#media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Here is a good article on the process: http://css-tricks.com/css-media-queries/
I'm wondering if there's any way that I can assign an id to a webpage based on the type of device. For example, I have the css set up as follows
#desktop {
min-width:1200px;
min-height:500px;
}
#tablet {
min-width:600px;
min-height:480px;
#mobile {
min-width:320px;
min-height:400px;
What I would like to do is to assign these ids to the body tag, I know there are ways to detect a device and assign a css file, but can I assign an id to the body based on the device?
What you need to do is use the css feature called media query.
Process: add in the head tag of your page the meta tag below to display correctly pages on device (size of text, width etc...)
<meta name="viewport" content="width=device-width" />
or
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Check online to review differences, enable zoom etc...
Then, In your CSS, you will have to build it like this
CSS
Your curent css is here (for desktop)
#the_name_of_the_div_is_the_same{
width:100%;
background-color:yellow;
}
/* This are the 4 principals size of screen: */
/* No body is using this one
#media screen and (max-width: 1680px) {
#the_name_of_the_div_is_the_same{
Do something in css
}
}*/
/* Then, if the width of the screen is under 960px and above 758px, your div will get this attributes */
#media screen and (max-width: 960px) {
#the_name_of_the_div_is_the_same{
width:80%;
background-color:red;
}
}
#media screen and (max-width: 758px) {
#the_name_of_the_div_is_the_same{
width:30%;
background-color: black;
}
}
#media screen and (max-width: 524px) {
#the_name_of_the_div_is_the_same{
width:70%;
background-color: green;
}
}
Dimensions:
iPhone 3+4 portrait w320 x 480
iPhone 5 portrait 320 x 568
Crappy Android portrait 240 x 320
Android (Samsung Galaxy) portrait 380 by 685
iPad portrait 768 x 1024
Kindle portrait 600 x 1024
Or you can use a plug-in to detect devices, and redirect them to the correct page (3 different pages, or load 3 different css etc) according to their device. Note: with this solution, your website won't be responsive but it will work across all devices.
My CSS that uses media queries doesn't detect devices correctly...
My code:
#media screen and (min-width: 240px) and (max-width: 320px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}
I want the div to be blue on a small phone like HTC wildfire and red on a tablet like iPad Mini.
Extending from comment:
Browsers on small devices tend to scale web pages a little bit. To get the "real" dimension for media queries, add
<meta name="viewport" content="initial-scale=1.0" />
to the head of your document.
To inspect the "rendered" dimension, use something like this:
<script type="text/javascript">
window.addEventListener("load",function(){
var box=document.body.getBoundingClientRect();
document.getElementById("whatever").value=box.width+" x "+box.height;
},false);
</script>
This may or may not prevent the scale setting of the browser itself, but will at least prevent the "auto" scaling.
In my own experience, some situations, like a <p> with long sentence, will likely causes browsers to scale down to make it more feel like "a sentence". By specifying initial-scale=1.0, Opera Mobile still scale to its setting (by default 125%), but no more than that, and the long sentence will wrap.
Try it with adding screen to the query.
#media screen and (min-width: 240px) {
#test{
width:50px;
height:50px;
background-color:blue;
}
}
#media screen and (min-width: 640px) {
#test{
width:50px;
height:50px;
background-color:red;
}
}
This is my first attempt at developing a responsive site. It's working fine in all browsers but IE9. I know that IE9 is compatible with media queries. I checked to see if compatibility mode was turned off and I don't see the icon visible so I believe that it is. My media queries are listed below the base styles. I'll just paste in a few media queries below so that I don't exceed any character limits. Let me know if you need to see more. Note: The doc type is for html5.
Media Queries:
#media only screen and (max-width: 479px) {
/* 320 =================================================== */
header .logo a {
background:url(../images/logo-320.png) no-repeat;
width:213px;
height:69px;
float:left;
margin-top:35px;
display:block;
}
}
#media only screen and (max-width: 480px) {
header {min-width:100%;}
.main-link-wrap {
width:100%;
margin:0 auto;
}
.featured-prod {
width:100%;
}
footer {
min-width:100%;
}
}
#media only screen and (min-width: 480px) {
/* 480 =================================================== */
header .logo a {
background:url(../images/logo-480.png) no-repeat;
width:310px;
height:94px;
float:left;
margin-top:5px;
display:block;
}
.featured-prod .product-box {
width:185px;
margin-left:1.8%;
margin-right:1.8%;
text-align:left;
color:#282828;
font-size:12px;
font-size:1.2rem;
line-height:13px;
float:left;
}
footer .address {
font-size:22px;
line-height:32px;
}
}
Tested with a very simple html5 page.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>
Referenced your stylesheet. Added
body {background: #F00;}
to the first query and
body {background: #00F;}
to the second query.
Background changes from red to blue as expected when resized in IE9, indicating that media query is working. I suggest try adding the same to your page to prove the media queries.
If the background changes as expected then there is something else wrong with your CSS (e.g. is it targeting the correct element; is another style overriding etc.)
If the background doesn't change then there is something unusual going on in your page, or with compatibility, etc.
Is there a reason you're using a max-width: 479px and a max-width: 480px media query?
I assume you're not seeing any of your styling in the max-width: 479px block? This is because those rules are being overridden by your max-width:480px rule.
Here's why, if a browser is 320px wide - that means it is less than the maximum width of 479px but it is also less than 480px (both conditions are satisfied). And because you've got the max-width: 480px block after your max-width:479px it's overriding those rules. My suggestion would be for you to include the rules in your max-width: 480px in your max-width: 479px block or vice-verse.
As an FYI, this problem is not IE9 specific - arranging your CSS rules in that sense will behave the same way across all browsers.