I'm not familiar with media queries from last 2 days I try a lot and search for several time but still I'm failed to add queries to my style sheet...
I just want to apply media queries into my css for all devices. any one can help me set the proper width and height for all div,table.
here's code
#media only screen and (min-width: 320px) and (max-width: 979px) {
html ,body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
/* overflow-x: hidden;*/
text-align: right; direction: rtl;
}
body {
background:#77d5fb;
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
opacity: .98;
}
table.body {
width: 950px;
background: #fff;
padding: 10px;
margin-top:70px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-moz-box-shadow:0px 0px 20px #fff;
-webkit-box-shadow:0px 0px 20px #fff;
box-shadow:0px 0px 20px #fff;
min-height:100%;
}
.container{
width:100%;
background:#fff;
min-height:100%;
position:relative;
padding-bottom:105px;
}
#footer{
background:#eee;
left:0px;
right:0px;
bottom:0px;
width:100%;
height:171px;
position:absolute;
}
#Layer1 {
position:absolute;
position:fixed;
top:0px;
width:100%;
height:50px;
z-index:1;
padding-left:0px;
padding-right: 0px;
background: #fff;
text-align: right; direction: rtl;
}
div.content {
width: 950px;
padding: 10px 0px 20px 0px;
text-align: left;
margin-left: auto;
margin-right: auto;
min-height:100%;
}}
<div class="container">
<div id="Layer1">Top Nav</div>
<table cellpadding='0' cellspacing='0' class='body' align='center'>
<tr>
<td><div class='content'>Content here</div></td></tr></table><div id='footer'>Footer</div></div>
It's not very clear what you're after, but for obtaining the responsive design, then you should use % rather than fixed widths, ie - px.
If this isn't what you're after, please create a fiddle.
A side note - setting opacity on the body will affect all the elements that sit on top of it. It's better to use rgba on the background rather than setting opacity.
body {
/* background:#77d5fb;
opacity: .98;*/
background-color: rgba(119,213,251, .98);
text-align: center;
font-size: 11px;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
You should remove the 950px, since that will go outside the container if the width of the body is less than 950px. Set these to percentages rather than fixed widths. Also there's no point in using table if you're not using them for their purpose. Use floats with % width values (if needed), rather than table.
table.body {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
div.content {
width: 90%; /* or 100%, depending on what you're after */
/* other css styles */
}
You start by doing mobile first, like so:
#media (min-width: 320px) and (max-width: 560px) {
// styles here
}
#media (min-width: 768px) and (max-width: 1024px) {
// styles for that size here
}
#media (max-width: 1024px) {
// desktops
}
#media (max-width: 1200px) {
// large desktops
}
If you want orientation, then you need to do:
#media (min-device-width: XXXpx) and (max-device-width: XXXpx) and (orientation:portrait)
*/ or orientation:landscape */ {
// styles
}
Important
You need this in your header before ANY media queries will work
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
Related
I started my first site from making mobile version. After that, i tried to add #media screen and (min-width: 500px) for desktops, but after that my mobile site looks like desktop. I don't understand why and don't know how to fix it. I kept mozilla's tutorials and that's it.
/* CSS */
body{
background-color: yellow;
display: flex;
margin: 1em;
flex-flow: row wrap;
}
html{
font-family: sans-serif;
}
header{
order: 0;
background-color: black;
color:blanchedalmond;
font-size: 3em;
padding: 0.5em 1em;
border-radius: 1em;
}
header nav{
border-top: 1px solid #999;
margin-top: 0;
}
header ul{
list-style: none;
padding: 0;
margin: 0;
}
...............
#media screen and (min-width: 500px)
{header{
display: flex; /* separate the nav and title */
justify-content: space-between;
align-items: center;
font-size: 1em;
width: 100%;
}
header ul {
display: flex; /* mav navigation display using flexbox */
}
header li {
margin: 0; /*remove the margin used in the mobile design */
}
header nav{
border:0;
}
}
Thanks in advance
if you want to make mobile first website you should
declare a max-width media-queray first at the above code and then the rest of your code will be applied to the desktop version
if you want to understand how both of them works
read below
Media Queries Demystified: CSS Min-Width and Max-Width
for mobile version.
#media screen and (max-width: 500px)
and then the rest of your code will apply for desktop-version
The CSS media query for small devices isn't working for Android when screen is rotated in landscape mode, the background color isn't changing, and the form overflows.
The site works good, when screen rotation is turned off, I don't know why is this happening, since there is no problem in IOS, only in Android.
The CSS code:
* {
box-sizing: border-box;
}
*:focus {
outline: none;
}
body,
html {
height: 100%;
margin: 0;
}
body {
background: linear-gradient(to top left, #5487ab 17%, #ffffff 102%) fixed;
background-repeat: no-repeat;
background-size: cover;
}
#media screen and (max-width: 549px) {
.houseImg {
display: none;
}
.container {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
background-color: #f1f1f1e0;
height: 386px;
width: 278px;
border-radius: 9px;
margin: auto;
margin-top: 4rem;
}
.brand {
display: block;
margin: auto;
width: 29%;
padding-top: 28px;
}
.brandName {
font-family: 'Source Serif Pro', serif;
display: block;
text-align: center;
font-size: 19px;
color: #0060a3;
letter-spacing: 0.4px;
margin: 0;
margin-top: 7px;
}
.usrTxtField {
background-color: #f1f1f1e0;
width: 237px;
height: 31px;
border: 1px solid #8c8b8b;
border-radius: 7px;
font-size: 16px;
padding-left: 8px;
font-family: 'Maven Pro', sans-serif;
color: #252525;
transition: none;
display: block;
margin: auto;
}
.usrTxtField:focus {
border: 2px solid #3d79a2;
}
.usr {
margin-left: 20px;
margin-bottom: 4px;
margin-top: 20px;
font-family: 'Maven Pro', sans-serif;
font-size: 12.5px;
color: #5a5a5a;
}
.submitLogIn {
background-color: #0060a3;
border: none;
display: block;
margin: auto;
text-align: center;
height: 40px;
width: 125px;
margin-top: 17px;
border-radius: 25px;
color: #fff;
font-size: 14px;
letter-spacing: 0.4px;
font-family: 'Maven Pro', sans-serif;
cursor: pointer;
}
.checkboxSave {
margin-left: 20px;
margin-top: 10px;
}
.saveText {
font-family: 'Maven Pro', sans-serif;
color: #5a5a5a;
font-size: 12px;
}
.forgotPassword {
font-family: 'Maven Pro', sans-serif;
color: #0060a3;
font-size: 12px;
text-decoration: none;
margin-left: 18px;
}
}
The HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Art</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Source+Serif+Pro:600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:500&display=swap" rel="stylesheet">
</head>
<body>
<div class="gridContainer">
<div class="container">
<img src="img/artLogo.png" class="brand">
<p class="brandName">ART PS GROUP</p>
<form autocomplete="off">
<p class="usr">Username</p>
<input type="text" name="usrTxt" class="usrTxtField">
<p class="usr">Password</p>
<input type="password" name="password" class="usrTxtField">
<input type="submit" name="submit" value="Log In" class="submitLogIn">
<input type="checkbox" name="save" class="checkboxSave"><span class="saveText">Remember me</span>Forgot Your Password?
</form>
</div>
<div class="container2">
<img src="img/birdHouse.jpg" class="houseImg">
</div>
</div>
</body>
</html>
This happens because your android device screen has a height greater than 549px (considering your media query specifications). Naturally in landscape mode, this height becomes device width and hence your media query is ignored.
this is the media query you can target for almost all phones
/* phones (portrait and landscape) ----------- */
#media only screen and (min-width : 320px) {
/* Styles */
}
/* phones (portrait only) ----------- */
#media only screen and (max-width : 480px) {
/* Styles */
}
It is not possible to accomplish responsive design with only one media query. For making responsive design right, please visit and check this site, where media queries are explained and are examples on how to use it.
Android phone and iOS phone doesn't necessarily use the same width and height, most iOS phones uses width: 375px and height: 667px(or width: 667px and height: 375px when in landscape mode), although that is only for iPhone 6/7/8 excluding Plus and other models, you can check width/height which phone use which in Chrome/Mozzila Firefox/etc. in developer mode while emulating mobile devices.
Giving fixed width for DOM elements can mess up the view in small devices. particularly when the given width is not available as the device width goes less than that width.
So while writing media queries for smaller devices, say mobile phones, It would be great if you replace all the fixed widths to percentages. So that they will not overflow from the available space and will stay within the device width.
If you are having issues specifically for landscape, you can handle them using media query and orientation combination.
#media all and (max-width: 768px) and (orientation: landscape) {
}
Above code is enough for writing rules for small devices when used in landscape orientation.
I've got some text I'd like to scale and then move up so it's over an image on a mobile.
<style>
#rcontainer {
height: 340px;
width: 100%;
position: relative;
}
.rtext span {
position: absolute;
bottom: 130px;
font-family: "Georgia", serif;
font-size: 1.8em;
color: white;
padding: 0 40px;
width: 100%;
line-height: 110%;
}
#media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
font-size: 50%;
padding: 0 40px 100px 0;
}
</style>
<div id="rcontainer">
<img alt="" src="/portals/0/Images/photos/rexanne_griffeth_contact_info_850.png" />
<p class="rtext">
<span>Contact: Rexanne Griffeth<br />
6000 Hospital Drive<br />
Hannibal, MO 63401<br />
(573) 629-3564<br />
rexanne.griffeth#hrhonline.org
</span></p>
</div>
I'm trying to size the font (which works with my media query but I can't seem to move the text up and over the image.
Here is my dev URL. current results
Change the bottom attribute in the media query:
#media screen and (min-width: 0px) and (max-width: 720px) {
.rtext {
font-size: 50%;
padding: 0 40px 100px 0;
bottom: 220px
}
I am having this CSS style, which i am trying to run on chrome v28, Firefox v222 and IE8:
html, body{
margin: 36px;
width: 100%;
background-color: black;
}
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
background-color: red;
}
}
and as a markup I add:
<!DOCTYPE html>
<html>
<head></head>
<body><div id="page"></div></body>
</html>
Just want to understand why it is not changing color to red if I minimize the window.
Any Help will be great help.
Thanks
Raja
#page has no content thus it has height:0px; Try the following: (working jsFiddle)
#media screen and (max-width: 768px){
html, body{
width: 100%;
height: 100%;
}
#page {
margin: 20px;
width: 100%;
height:100%; /* set the height */
background-color: red;
}
}
As for the addition to the question - changing the background - You will have to reverse the order of the CSS like this:
<style>
html, body{
margin: 36px; width: 100%; height: 100%;
}
body{ background-color: black; } /* This should be first for the media query to override */
#media screen and (max-width: 768px){
html, body{ margin: 20x; }
body{ background-color: red; } /* When the media query is applied this overrides the previous rule */
}
</style>
I'm sure this is quite a basic question, so apologies in advance as I am new to this.
I am working on a web app that is designed to be mobile first. As all my initial layouts are designed for small screens I have introduced a mobile phone jpg as an <img>. Then I have overlaid my canvas onto this using absolute positioning. This gives me a pseudo mobile screen I can use whilst experimenting with my design without having to constantly test with the handset.
The idea is to then use suitable media queries to which when encountering smaller screens use display:block to prevent the image being displayed.
For a short time I had it working, but now I've broken it (with no backup)) and can't see how! It works alright on the wider desktop screens. The image container is displayed and the backdrop canvas is correctly laid over the top. However the image container is also being displayed on mobile devices (and as there is no absolute position) my real layout is then displayed after the .
The HTML looks like this ...
<div id="container">
<img src='phone.jpg' class="desktop-visible"/>
</div>
<div id="backdrop">
Text
</div>
My CSS is currently this ...
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
You're not closing the first media query. :-)
// Set Defaults
.desktop-visible { display:none;}
// Desktop and landscape tablets
#media (min-width: 768px) {
.desktop-visible { display: block; margin: 0 auto; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
position:absolute;
margin: 0 auto;
}
#backdrop {
margin: 0 auto;
position:absolute;
top:86px;
left:26px;
width:483px;
max-height: 862px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
} // you missed this one
// Portrait tablets and landscape mobiles
#media (max-width: 767px) {
.desktop-visible { display: none; }
#container {
position:relative;
width: 538px;
margin: 0 auto;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}
// Portrait mobiles
#media (max-width: 480px) {
.desktop-visible { display: none; }
#container {
display: none;
}
#container img {
display: none;
}
#backdrop {
margin: 2px auto;
height: 820px;
}
}