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 */
}
Related
I am using the media query for iPad and Ipad mini as:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait)
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape)
Problem 1: In landscape mode I observe the difference in rendering, where in iPad renders the UI element as expected whereas iPad Mini overlaps the one over other,
HTML Snippet
<div class="desktopContentFooter">
<span class="hotline">You can also reach us on our Something hotline number XXXXXXXXXXX</span>
<p class="copyright">©Something (CRN: XXXXXXXX) All Rights Reserved
<span class="desktopfooterLink">
<a href="http://www.example.com" target="_blank" rel="noopener" title="What is Something>What is Something</a> |
Privacy Policy |
Terms & Conditions
</span>
</p>
</div>
Associated CSS inside media query for landscape:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape){
.desktopContentFooter{
float:none;
margin-top: 57px;
width: 660px;
display:block;
position: absolute;
top: 843px;
left: 678px;
text-align:center;
}
.hotline{
font-family: AvenirBook_New;
font-size: 15px;
color:#1d3444;
height:28px;
width:auto;
margin-bottom:5px;
}
.copyright{
font-family: AvenirBook_New;
font-size: 18px;
color:#1d3444;
height:15px;
width:auto;
margin-bottom:5px;
display: flex;
flex-direction: column;
}
.desktopfooterLink{
font-family: AvenirBook_New;
font-size: 18px;
/* margin-top: 24px; */
}
}
Problem 2: in iPad mini Landscape I get the horizontal and vertical scroll bar with zoomed in screen(I have added meta tag "<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">") seems to be some other problem
Please suggest the direction to handle these situation
The Meta tag you are is correct. But because the DPI/Pixel Density differs between devices you should use the following:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/*** STYLES GO HERE ***/
}
Be sure to check out this link: http://stephen.io/mediaqueries/
#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;}
}
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
So I have been working on a website: vivascoaching.com and when the window is maximized it looks fine, however when I minimize it or start to alter the window everything is all over the place. How do I keep everything in margin even when the window is altered? here is my HTML for my index page and my CSS for the entire website.
My code:
html{
height:100%;
width:100%
}
header{
margin-left: 20px;
margin-bottom:5px;
}
body{
background-color: #00B8E5;
font-family: "Comic Sans MS", sans-serif;
}
h1,h2,h3{
color: #112C84;
}
a:link {
color: #112C84;
text-decoration: none;
font-size: 120%;
}
object {
border-style: solid;
}
/*-------NAV STYLING------------*/
#mainlinks li{
float:left;
margin-left:150px;
}
#secondarylinks li{
margin-bottom:20px;
margin-top:40px;
padding-right:5px;
}
#secondarylinks ul{
padding-left:20px;
}
/*---------- COLUMN STYLING ----------*/
.left_column{
float:left;
width:8%;
margin-left:5px;
}
.middle_column{
float:left;
background-color:white;
text-align:center;
width:70%;
margin:2px;
padding:10px;
border-style: solid;
}
.right_column{
float:left;
text-align:center;
width:10%;
margin:5px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Vivas Coaching-Main</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style/main.css">
<link rel="stylesheet" href="../style/normalize.css">
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" width="465px" height="135px" align="middle">
</header>
<div class="left_column">
<nav id="secondarylinks">
<ul>
<li>Register</li>
<li>Dates</li>
<li>Pricing</li>
<li>Forms</li>
</ul>
</nav>
</div>
<div class="middle_column">
<nav id="mainlinks">
<ul>
<li>Main</li>
<li>Classes</li>
<li>Team Building</li>
</ul>
</nav>
<img src="Images/SAT summer flyer.jpg" alt="SAT summer flyer" width="800px" height="800px">
<footer>
<p>©VivasCoaching 2016</p>
</footer>
</div>
<div class="right_column">
<h2>Contact Us</h2>
<p>(646)316-8481/<br>(403)718-0159</p>
<p>Please fill out the information below and we will get back to you as soon as possible!<p>
<form method="post" action="callback.php">
<label for="firstname">First Name: </label>
<input type="text" name="firstname"/>
<label for="lastname">Last Name: </label>
<input type="text" name="lastname"/>
<label for="email">Email: <span class="required"></label>
<input type="text" name="email"/>
<label>*What is 2+2? (Anti-spam)</label>
<input name="human" placeholder="Type Here">
<label for="message"> Message: <span class="required"></label>
<textarea id="message" name="message" cols="25" rows="10" placeholder="Type your message here!"></textarea>
<input type="submit" id="submit"/>
</form>
</div>
</body>
</html>
fix your html errors add all of this media queries code to the bottom of your css sheet
/* 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 */
}
/* 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 (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone 6 landscape */
#media only screen and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 portrait */
#media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2)
{ }
/* iPhone 6 Plus landscape */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 Plus portrait */
#media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 3)
{ }
/* iPhone 6 and 6 Plus */
#media only screen
and (max-device-width: 640px),
only screen and (max-device-width: 667px),
only screen and (max-width: 480px)
{ }
/* Apple Watch */
#media
(max-device-width: 42mm)
and (min-device-width: 38mm)
{ }
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;
}
}