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.
Related
I’ve just started to learn HTML/CSS. My goal is to prepare a parallax effect on my test website. I constructed a code with parallax effect in CSS, but the problem is that the images located under the container is unsmooth during scrolling the page (the image extends and rips).
Please consider that I used border-radius method which rounds corners of the containers under which an images are located. I noted that when I cut border-radius method then the unsmoothing effect doesn’t occur. But my goal is to leave this border-radius method unchanged
I know that I can construct similar parallax effect in JS, but my goal is to understand reason why parallax effect doesn’t work correctly in CSS together with border-radius method.
I focused that the unwanted effect occurs only in the case when the browser page is narrowed. Please see the differences between the effect in Codepen one with code (part of the browser page in which finishing page is showed is narrowed):
https://codepen.io/marartgithub/pen/vYpPEjQ
and second one in full page (the problem doesn’t occur):
https://codepen.io/marartgithub/full/vYpPEjQ
I'm sorry if the problem is not the biggest one and for some of you could be insignificant, but my goal is to understand why not all which I wanted works fine to be better programmer.
I would use a :before pseudo tag to achieve this effect. Here are the changes I made:
I remove the about bg div and set each box to flexbox as that will be a cleaner way to acheive this layout.
Then, I removed the border-radius from .about-us-box and added it to .about-us-box:before. In the :before styling, I set it the size of the parent container (.about-us-box) and then set it to have a border radius. You will see box-shadow attribute as border-radius doesn't curve the inside corner. Box-shadow takes care of that for us.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
}
/* n a v */
.nav {
height: 50px;
background-color: #333;
text-align: center;
line-height: 50px;
font-size: 0;
}
.nav-item {
display: inline-block;
}
.nav-item a {
padding: 0 50px;
color: whitesmoke;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
transition: color 0.3s;
font-size: 16px;
}
.nav-item a:hover {
color: royalblue;
}
/* h e a d e r */
.header-jpg {
position: relative;
height: 300px;
background-image: url('https://cdn.pixabay.com/photo/2016/09/29/13/08/planet-1702788_1280.jpg');
background-size: cover;
background-position: 0 50%;
}
.header-text {
position: absolute;
color: whitesmoke;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.header-bg {
position: absolute;
height: 100%;
width: 100%;
}
.header-text h1 {
direction: rtl;
margin-bottom: 10px;
text-transform: lowercase;
letter-spacing: 2px;
text-shadow: 2px 2px 6px gold;
}
/* m a i n */
main {
margin: 50px auto;
width: 1200px;
}
main h2 {
margin-bottom: 20px;
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-size: 16px;
}
.about-us-box {
position: relative;
height: 300px;
margin: 40px 0;
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
z-index: 0;
}
.about-us-box:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 20px 0 20px 0;
z-inex: 1;
background-color: transparent;
border-radius: 20px 0 20px 0;
box-shadow: 0 0 0 13px #fff;
}
.top {
background-image: url('https://cdn.pixabay.com/photo/2017/08/06/07/10/coffee-2589761_1280.jpg');
}
.middle {
background-image: url('https://cdn.pixabay.com/photo/2017/06/10/16/19/iphone-2390121_1280.jpg');
}
.bottom {
background-image: url('https://cdn.pixabay.com/photo/2015/01/09/11/08/startup-594090_1280.jpg');
}
.about-us-text {
text-align: center;
color: whitesmoke;
padding: 2rem 1rem;
background-color: black;
}
.about-us-text h3 {
margin-bottom: 10px;
text-transform: uppercase;
}
/* f o o t e r */
footer {
height: 80px;
line-height: 80px;
background-color: #333;
color: #ddd;
text-align: center;
font-size: 20px;
}
.icon-box {
margin-left: 20px;
}
.icon-box a {
margin: 0 5px;
color: #ddd;
text-decoration: none;
font-size: 20px;
transition: color 0.3s;
}
.icon-box a:hover {
color: royalblue;
}
.ti {
padding-right: 10px;
font-size: 26px;
margin-right: 10px;
}
.elem-main {
width: 300px;
margin: 0 auto;
}
.prices-table {
margin: 0 auto;
}
.prices-table td {
padding: 10px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TASK - WE LOVE COFFEE</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/#tabler/icons#latest/iconfont/tabler-icons.min.css" />
<link rel="stylesheet" href="./css/style_en.css" />
</head>
<body>
<header>
<div class="header-jpg">
<div class="header-bg"></div>
<div class="header-text">
<h1>Creative design</h1>
<p>With our support you will create a dreamlike website</p>
</div>
</div>
</header>
<nav class="nav">
<ul>
<li class="nav-item">home</li>
<li class="nav-item">services</li>
<li class="nav-item">pricing</li>
<li class="nav-item">contact</li>
</ul>
</nav>
<main>
<h2>About us</h2>
<div class="about-us-box top">
<div class="about-us-text">
<h3>We love coffee</h3>
<p>
We interested in coffe in our team on years. We love his smell and
taste. We love the process on which coffee beans goes through
starting from day of cutting during harvest then heat treatment to
grinding process in our coffee grinder and passing it through a
espresso machine.
</p>
</div>
</div>
<div class="about-us-box middle">
<div class="about-us-text">
<h3>We all are creative</h3>
<p>
Characteristic of our work requires from us to be continously a
creative persons, because of competentive market and our clients
demands which expects from us to provide unconventional solutions
supported theri business.
</p>
</div>
</div>
<div class="about-us-box bottom">
<div class="about-us-text">
<h3>We like our job</h3>
<p>
We are young team of simmilar thingking and creative and full
positive energy persons. We meets as well outside of our job to
receive a good balance between proffesionall acvivity and private
life.
</p>
</div>
</div>
</main>
<footer>
<p>
© 2022 Creative design
<span class="icon-box">
<i class="ti ti-brand-facebook"></i>
<i class="ti ti-brand-twitter"></i>
</span>
</p>
</footer>
</body>
</html>
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'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>
I am attempting to create a rem based site using Twitter-Bootstrap 3. In particular my text is not behaving responsively. It is just wrapping without changing font size or line height. I added a color change to the #media statements to visually track the break points. I'm not seeing any color changes either so the custom #media code is also not working. From what I have researched, it should be working. Obviously, I'm missing something. Please take a look at https://jsfiddle.net/dlearman/995w62e0/4/ and steer me in the right direction.
html {
font-family: 'NimbusSanNov-Reg', "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", sans-serif;
font-size: 15px;
/* set default 1rem = 15px */
color: #302C25;
line-height: 1.618;
-webkit-text-size-adjust: 100%;
/* why is this needed? */
-ms-text-size-adjust: 100%;
}
body {
background-color: #FFF;
}
#page {
position: relative;
top: 5.33rem;
left: 7.4rem;
padding-bottom: 7.667rem;
}
.container-full-width {
position: relative;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.row-centered {
text-align: center;
}
#testBox {
position: relative;
display: inline-block;
margin-top: 0;
margin-left: 60rem;
width: 10rem;
height: auto;
}
.bigText {
font-family: 'NimbusSanNov-Reg''HelveticaNeueLight', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'HelveticaNeue', sans-serif;
font-size: 1rem;
margin: 0 0 1.667rem 0;
letter-spacing: .0667rem;
}
.bigTextItalic {
font-family: 'NimbusSanNov-RegIta', 'HelveticaNeueLightItalic', 'HelveticaNeue-LightItalic', 'Helvetica Neue LightItalic', 'HelveticaNeueItalic', sans-serif;
font-size: 1rem;
letter-spacing: .0667rem;
margin: 0 0 1.667rem 0;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div id="page" class="container-fluid container-fluid-full-width">
<div id="homeBrandCopy" class="container-fluid container-full-width">
<div class="container">
<div class="row row-centered">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="testBox center-block">
<p class="text-center bigText">Every writer is cursed or blessed with a unique creative metabolism: the distinctive speed and efficiency with which he or she converts the raw fuel of life into the mystical,<span class='bigTextItalic'> dancing blue smoke of art. </span>
</p>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</div>
</div>
Please make sure there is no space between the # and media because CSS sees #media as a media query.
CSS:
#media only screen and (max-width 1200px) {
html {
font-size: 1.333rem;
line-height:2.157;
color:#000FFF;
}
}
#media only screen and (max-width 992px) {
html {
font-size: 1rem;
line-height:1.618;
color:#FF0000
}
}
#media only screen and (max-width 768px) {
html {
font-size: .933;
line-height:1.510;
color:#00FF00;
}
}
#media only screen and (max-width 480px) {
html {
font-size: 1.067;
line-height:1.726;
color:0000FF;
}
}
#media only screen and (max-width 320px) {
html {
font-size: 1.333;
line-height:2.157;
color:#FF00FF;
}
}
Reference: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have recently discovered skeleton.css and it is exactly what I was looking for. I didn't quite understand columns, but the example for buttons did exactly what I wanted as far as stacking elements as the screen narrows. What I have works beautifully, but I am not yet savvy enough with css to make the buttons into columns. The html and css code I have cut down to just what works. Any suggestions as to how to convert buttons to columns would be greatly appreciated.
My code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div>
<a class="button" href="#">Would like column 1</a>
<button>Would like column 2</button>
<input value="Would like column 3" type="submit">
<input value="Would like column 4" type="button">
<input value="Would like column 5" type="button">
</div>
</div>
</body>
</html>
/* css */
.container {
position: relative;
width: 80%;
max-width: 960px;
margin: 0 auto;
padding: 0; }
.container .columns {
float: left;
width: 100%;
box-sizing: border-box; }
/* For devices larger than 550px */
#media (min-width: 550px) {
.container .columns {
margin-left: 4%; }
}
html {
font-size: 62.5%; }
body {
font-size: 1.5em;
line-height: 1.6;
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, ans-serif;
color: #222; }
a {
color: #1EAEDB; }
a:hover {
color: #0FA0CE;
}
.button,
button,
input[type="submit"],
input[type="button"] {
display: inline-block;
background-color: transparent;
border-radius: 4px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
border: 1px solid #bbb;
height: 38px;
width:188px;
line-height: 38px;
padding: 0;
white-space: nowrap;
box-sizing: border-box;
}
button {
margin-bottom: 0;
}
.container:after,
.row:after/**,
.u-cf**/ {
content: "";
display: table;
clear: both;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}
I decided to play with it myself and replaced the inputs with divs and changed the css accordingly. The code below will produce five equal width columns which will stack in four stages as the screen narrows. It works perfectly for what I need and was pretty simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="None">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//127.0.0.1/css/normalize.css">
<link rel="stylesheet" href="//127.0.0.1/css/skeleton2.css">
</head>
<body>
<div class="container" style="border:1px solid red;">
<div class="column">Column 1<br>More stuff here</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
<div class="column">Column 4</div>
<div class="column">Column 5</div>
</div>
</body>
</html>
.container {
position: relative;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 0;
}
/* For devices larger than 550px */
#media (min-width: 550px) {
html {
font-size: 62.5%; }
body {
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
font-weight: 400;
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #000;
}
.column {
display: inline-block;
width:188px;
vertical-align: text-top;
padding-left: 10px;
white-space: nowrap;
box-sizing: border-box;
}
/* Larger than mobile */
#media (min-width: 400px) {}
/* Larger than phablet (also point when grid becomes active) */
#media (min-width: 550px) {}
/* Larger than tablet */
#media (min-width: 750px) {}
/* Larger than desktop */
#media (min-width: 1000px) {}
/* Larger than Desktop HD */
#media (min-width: 1200px) {}