#media only screen and(max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
#media screen and(max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
The above code works in Safari but fails to work in Chrome. Tried both.
It seems a syntax error. Try to put a space after "and"
#media only screen and (max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
Please Apply this code :
/* ----------- Non-Retina Screens ----------- */
#media screen
and (max-device-width: 1132px)
and (-webkit-max-device-pixel-ratio: 1)
{
#yc-contact{margin-left: 50px;}
}
/* ----------- Retina Screens ----------- */
#media screen
and (max-device-width: 1132px)
and (-webkit-max-device-pixel-ratio: 2)
and (max-resolution: 192dpi)
{
#yc-contact{margin-left: 50px;}
}
Related
solved it:
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
I have a small font-sizing issue when rotating from portrait to landscape. When testing on responsive mode in safari the font-sizing is working fine, but when testing it on my iPhone 5s the font-size works fine in portrait mode, right font-size the way i set, turning to landscape bigger font-size. The navigation shows the right font-size, but when opening it also changes bigger. All the font-sizing is done on the body tag with px, don't need to specify it separately or use em,rem etc. Can't find where the problem is. Again in responsive mode Safari everything is working.
* {
margin: 0;
padding: 0;
}
body {
font-family: helvetica, arial, sans-serif;
font-size: 23px;
font-weight: normal;
text-align: left;
line-height: 1.2;
color: black;
}
h1, h2 {
font-size: inherit;
font-weight: inherit;
text-decoration: none;
-webkit-hyphens: auto;
hyphens: auto;
}
#media screen and (max-width: 1112px) { /* all after this breakpoint size to 20px */
body {
font-size: 20px;
}
}
#media screen and (max-width: 1024px) { /* all after this breakpoint size to 18px */
body {
font-size: 18px;
}
}
Try to use this media queries:
#media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min--moz-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and (max-width: 1025px),
only screen and ( min-device-pixel-ratio: 2) and (max-width: 1025px),
only screen and ( min-resolution: 192dpi) and (max-width: 1025px),
only screen and ( min-resolution: 2dppx) and (max-width: 1025px) {
body {
font-size: 18px;
}
}
For iPhone7 I use this media query:
#media only screen
and (device-width : 375px)
and (-webkit-device-pixel-ratio : 3) {
body {
font-size: 18px;
}
}
Also, you can combine this media queries to resolve your issue.
Problem: I have the following styling that targets mobile phones for the footer:
#media (max-width: 800px){
#footer-affiliation {
background-color: #0077C0;
color: rgb(255, 255, 255);
padding: 5px;
height:110px;
width:109.01% !important;
margin-left:-15px;
}
}
However, it affects the footer on the IPAD. I did the following to target only IPAD's and IPhones. For the iphone css styling works fine, however for the IPAD styling is not working:
#media only screen
and (min-device-width : 480px)
and (max-device-width : 800px)
and (orientation : portrait) {
#footer-affiliation {
background-color: #0077C0;
color: rgb(255, 255, 255);
padding: 5px;
height:110px;
width:104% !important;
margin-left:-15px;
}
}
I would like to know what other approach I can do to target IPAD's only.
Thank You
For targeting iPad use following media query
#media only screen and (device-width: 768px) {
/* For general iPad layouts */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
Detailed info available in this site for various device in iPad
CSS media Queries for iPad
I have found a problem in text link color actually i set my link color is red for desktop view. Now when i saw in Iphone then the color change into blue. I use !important after color code but same result this time please tell me what is the problem and give me best solution.
can u add "-webkit-appearance: none;" to the anchor tag, and set the font color and remove important from your code
eg:
.link {
color: blue;
-webkit-appearance: none;
}
Ok i found my solution for this problem when i use this type of meta tag my text link color same as i described in css.
I use this meta tag in header.
<meta name="format-detection" content="telephone=no">
You should have something like
#media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
a {
color: red;
}
}
#media (min-device-width:320px) and (max-device-width:768px)
{
a {color:#ff0000;}
}
If above code is not working for you a very well detailed following code may fix your problem which is given below.
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
a {
color: #ff0000;
}
}
/* Landscape */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
a {
color: #ff0000;
}
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
a {
color: #ff0000;
}
}
/* Portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
a {
color: #ff0000;
}
}
/* Landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
a {
color: #ff0000;
}
}
When i make my browser window smaller the border will not stay around the form, it will instead overlap? So will my sentence. How do I make the border stay around the the form and have the border height adjust for the length of the form with padding?
#form_border{
margin: auto;
width: 400px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#form {
width: 50%;
height: 50%;
margin: auto;
padding-top: 2em;
text-align: center;
}
#form form{display: block;}
#existing_account{ text-align: center;
text-decoration: none;
color: black;
}
input[type=submit] {
background:white;
border:1px solid;
border-color: #292929;
cursor:pointer;
border-radius: 5px; }
input[type=submit] {
background:white;
border:1px solid;
border-color: #292929;
cursor:pointer;
border-radius: 5px; }
<div id="form_border">
<form id="form" method="post" action="">
<p>Username:<br> <input type="text" name="user_name" /> <br></p>
<p>Password:<br> <input type="password" name="user_pass"><br></p>
<p>Password again:<br> <input type="password" name="user_pass_check"><br></p>
<p>E-mail:<br> <input type="email" name="user_email"><br></p>
<input type="submit" value="Sign Up" />
</form>
<a id="existing_account" href="sign_in.php">Already have an account?</a>
</div>
Try using this code:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#form_border{
margin: auto;
width: 400px;
border-style: solid;
border-color: black;
border-width: 1px;
}
#form {
width: 50%;
height: 50%;
margin: auto;
padding-top: 2em;
text-align: center;
}
#form form{
display: block;
}
#existing_account{
text-align: center;
text-decoration: none;
color: black;
}
input[type=submit] {
background:white;
border:1px solid;
border-color: #292929;
cursor:pointer;
border-radius: 5px;
}
#media screen and (max-width:399px){
input[type="text"],
input[type="password"],
input[type="email"]{
width:90%;
}
#form_border{
width:98%;
}
#form {
width: 50%;
height: 50%;
}
}
</style>
</head>
<body>
<div id="form_border">
<form id="form" method="post" action="">
<p>Username:<br> <input type="text" name="user_name" /> <br></p>
<p>Password:<br> <input type="password" name="user_pass"><br></p>
<p>Password again:<br> <input type="password" name="user_pass_check"><br></p>
<p>E-mail:<br> <input type="email" name="user_email"><br></p>
<input type="submit" value="Sign Up" />
</form>
<a id="existing_account" href="sign_in.php">Already have an account?</a>
</div>
</body>
</html>
You will observe:
I have introduced the media query to manage the form size for the screens less than 400px in width.
Width of the form and form-elements has been taken care of in the media query.
Scope for improvements:
Restructure the HTML so it becomes more manageable.
use Media Queries more efficiently.
Use width values more efficiently.
You use this jsfiddle.net demo link.
Here are few more commonly used MEDIA QUERY BREAK POINTS which you may consider including in your CSS
/* Smartphones (portrait and landscape) ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* iPhone 5 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6 ----------- */
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* iPhone 6+ ----------- */
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S3 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Samsung Galaxy S4 ----------- */
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
/* Samsung Galaxy S5 ----------- */
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
#media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}
I have below script, it's doing fine in firefox and chrome. ie9 doesn't show the change of colors.
<style type="text/css">
body {
background-color: #FF77BB;
}
#media screen and (max-width: 960px) {
body {
background-color: #8A2BE2;
}
}
#media screen and (max-width: 768px) {
body {
background-color: #FF8C00;
}
}
#media screen and (max-width: 550px) {
body {
background-color: #7FFF00;
}
}
#media screen and (max-width: 320px) {
body {
background-color: #CC0011;
}
}
}
</style>
Works fine for me, just get rid of the extra } at the very end, the other browsers may not make it an issue but IE9 is very picky, if one thing is off it breaks the whole thing.