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) {}
Related
I wrote new CSS for my page here and it wouldn't update. So cleared my cache on Google Chrome by going to chrome:settings/clearBrowsingData, ya know the normal stuff and it still wouldn't update. So I went on my iPad just to see if it was a fluke on my computer's half but it wasn't updated on there either. So I came here. Any suggestions? Here is my styles.css and index.html:
STYLES:
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
scroll-behavior: smooth;
font-family: "Nunito", sans-serif;
}
a {
text-decoration: none;
}
.title {
text-align: center;
padding-top: 20rem;
}
.title h1 {
font-size: 3.5rem;
text-align: center;
}
.title h3 {
font-size: 2rem;
padding-bottom: 2rem;
}
.title a {
text-transform: uppercase;
color: #fff;
background: #333;
padding: 1rem 2.5rem;
border-radius: 8px;
font-size: 1.3rem;
transition: color 650ms, background 650ms;
}
.title a:hover {
color: #555;
background: #eee;
}
#media only screen and (min-width: 768px) {
.title {
padding-top: 30rem;
}
.title h1 {
font-size: 8rem;
}
.title h3 {
font-size: 4.5rem;
}
.title a {
font-size: 2.5rem;
padding: 1.5rem 3rem;
}
}
#media only screen and (min-width: 1000px) {
.title {
padding-top: 25rem;
}
.title h1 {
font-size: 5rem;
}
.title h3 {
font-size: 3.5rem;
}
.title a {
font-size: 1.3rem;
padding: 1rem 2.5rem;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Error 404</title>
<link rel="icon" href="logo.png">
</head>
<body>
<div class="title">
<h1>Not Found</h1>
<h3>This page either does not exist or<br> you don't have permission to view it. <br>(Error: 404)</h3>
Back to Home
</div>
</body>
</html>
You can call the different version of the same css file like this:
<link href="styles.css?v=1" rel="stylesheet" type="text/css">
Because you have given the name as styles.css without a starting /, the file will be downloaded from the same directory as the html file. And there is no styles.css in your 404 folder. So change style.css to /styles.css and it will work.
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'm picking up bootstrap after some time away,
I trying to create a simple responsive page
but I'm finding that when I resize the browser to a certain point
my central div overlaps the div above.
I've tried adjusting media queries, setting the top margins etc.
I've mocked up a page for viewing below
Thanks
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bwin slot game</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</head>
<body>
<div class="container-fluid">
<div class="sitebg">
<div class="row">
<div class="col-md-12 clearfix header">
<div id="tContainer"></div>
</div>
</div>
<div class="row">
<div id="game_container">
<div class="col-md-8">
<div id="sContainer" class="pull-right"></div>
</div>
<div class="col-md-4">
<div id="sContainer2"></div>
</div>
</div>
</div>
<div class=" row clearfix">
<div class="col-md-12"><div id="bContainer"></div></div>
<div class="faqs col-md-12"><div id="bContainer2"></div></div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#sContainer{
width:900px; height:500px;
background-color:#ccc;
}
#sContainer2{
width:320px; height:368px;
background-color:#c88;
}
#tContainer{
width:1087px; height:49px;
background-color:#c8c;
margin:0 auto;
}
#bContainer{
width:1087px; height:93px;
background-color:#ccc;
margin:0 auto;
}
#bContainer2{
width:970px; height:329px;
background-color:#c8c;
margin:0 auto;
}
.header{
background-color: #fff;
position: fixed;
top: 0;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.footer{
position: fixed;
bottom: 0;
width: 100%
}
.faqs{
background-color:#0b1140;
}
#accepted_payments img, .faqs img{
margin: 0 auto;
}
/* width:100%
* Header
*/
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
#game_container{
width:90%;
margin:10% auto 10% auto;
}
}
/*Game*/
#game_container{
width:90%;
margin:10% auto 10% auto;
}
#game{
padding-right: 0;
padding-bottom: 100px;
}
/*
* Footer
*/
#accepted_payments {
text-align: center;
width: 100%;
background: #fff;
min-height: 38px;
margin-top: 50px;
vertical-align: top;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
#game_container{
width:100%;
height:500px;
margin:10% auto 100px auto;
clear: both;
}
}
#media (min-width: 992px) {
#game_container{
margin:10% auto 100px auto;
width:100%;
margin:0 auto
}
}
#media (min-width: 1700px) {
#game_container{
margin:6% auto 100px auto;
width:70%;
}
#game{
padding-right: 5%;
}
}
Sorry just noticed the header class was position:fixed
Once I took that out works better now
I have multiple breakpoints using CSS media queries. My problem lies within the media query for 320px. When setting the viewport to 320px, the media query for 320px is not loaded. The media query for 640px is loaded instead of the query for 320px. Why?
My html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1.0">
<meta name="description" content="Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com">
<meta name="keywords" content="Websites, Web Design, Web Developement, Interactive Design, Search Engine Optimization, SEO, Motion Graphics, Video Editing, Graphic Design, Print, Branding, Logo">
<title>Web Design, Search Engine Optimization (SEO), Motion Graphics, Video Editing, Print, and Branding. - arisendesigns.com</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link href='http://fonts.googleapis.com/css?family=Rajdhani:400,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mediaQueries.css">
</head>
<body>
<section class="container clearfix">
<section id="navBar" class="grid_12">
</section>
<header id="banner" class="grid_12">
<div class="container headlineContainer">
<h1>
<p><strong>Creative</strong></p>
<p><strong>Graphic • Web • Motion</strong></p>
<p><strong>Designs</strong></p>
</h1>
</div>
<div class="container arrowContainer">
<div id="arrow">
<img src="img/arrow.png" alt="Scroll Down">
</div>
</div>
</header>
<section class="stretch grid_12"></section>
<footer id="footer" class="grid_12">
</footer>
</section>
<script type="text/javascript" src="jscript/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="jscript/jquery.fittext.js"></script>
<script type="text/javascript">
jQuery("h1, h2, h3, p").fitText(2)
</script>
</body>
</html>
My css:
/******* Global Styles ******************************************/
body {
font-family: 'Rajdhani', sans-serif;
color: #333;
font-size: 50px;
font-weight: 400;
}
img {
max-width: 100%;
}
/******* Typography Styles *************************************/
strong {
color: #fff;
font-weight: 500;
}
span #bold {
font-weight: 700;
}
h2 {
color: #333;
}
/******* Header Styles *********************************************/
#banner {
background: #333 url('bg/banner.png') no-repeat right top;
background-size: cover;
height: 600px;
}
.headlineContainer {
height: 40%;
float: left;
padding-top: 12.5%;
font-size: .6em;
}
.headlineContainer h1 {
line-height: 0em;
text-align: center;
}
.arrowContainer {
float: left;
height: 10%;
padding-top: 10%;
}
#arrow {
height: 100%;
width: 7%;
margin: auto;
}
/******* test styles ***************************************/
.stretch {
height: 2000px;
}
My media queries:
/******* Tablet Landscape *************************************/
#media(max-width: 1024px) {
#banner {
height: 400px;
}
.headlineContainer {
padding-top: 15%;
}
.arrowContainer {
padding-top: 9%;
}
}
/******* Tablet Portrait *******************************/
#media(max-width: 768px) {
#banner {
height: 300px;
}
.headlineContainer {
padding-top: 13.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
/******* Phone Landscape **********************************************/
#media(max-width: 480px) {
.headlineContainer {
padding-top: 12%;
}
.arrowContainer {
padding-top: 2%;
}
}
/******* Phone Portrait ********************************/
#media(max-width: 320px) {
.headlineContainer {
padding-top: 22%;
}
.arrowContainer {
padding-top: 0;
}
}
/******* Odd Breakpoints **************************/
#media(max-width: 1200px) {
#banner {
height: 500px;
}
.headlineContainer {
padding-top: 11.5%;
}
.arrowContainer {
padding-top: 9%;
}
}
#media(max-width: 896px) {
#banner {
height: 350px;
}
.headlineContainer {
padding-top: 10.5%;
}
.arrowContainer {
padding-top: 7%;
}
}
#media(max-width: 640px) {
#banner {
height: 200px;
}
.headlineContainer {
padding-top: 6.5%;
}
.arrowContainer {
padding-top: 4%;
}
}
#media(max-width: 640px) applies to all sizes 640px and below, so the styles specified in this media query will also be applied to screen widths of 320px. Media queries do not increase the specificity of the CSS rules within. Because your #media(max-width: 640px) media query comes after #media(max-width: 320px), the rules or equal specificity in the larger media query will override those in the smaller media query.
The simplest fix would be to order your media queries from the largest screen size to smallest.
If you need more control, you can limit your media query to screens within a range of sizes using a combination of min-width and max-width.
#media (min-width:320px) and (max-width: 640px) {
}
I have a section containing a anchor tag containing a h1, the h1 has a background image, when I hover over the h1 background image the position change to imitate a rollover, however, the rollover is also active outside of the h1 to the right of it try hovering to the right, I have tried to get rid of margins and padding to no avail.
Here is the site live
html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio of Anders Kitson</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<script type="text/javascript" src="//use.typekit.net/lfr7txf.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
</head>
<body>
<div id="container">
<header>
<h1>ASK</h1>
<h2>Anders Samuel Kitson, front end web developer.</h2>
</header>
<section id="siteThumbs"><!--not sure if this is appropriate use of the section tag-->
<h1>Springmethod.com</h1>
</section>
</div>
</body>
</html>
css
/*variables*/
/*shared styles*/
#container {
width: 960px;
max-width: 90%;
border: solid 0px #000;
margin: auto; }
header h1 {
background: url("../images/ask.gif");
width: 97px;
height: 96px;
text-indent: -9000px; }
header h2 {
font-family: "brandon-grotesque",sans-serif;
font-weight: 300;
font-size: 2.5em; }
#siteThumbs h1 {
background: url("../images/springmethod.jpg");
width: 321px;
height: 241px;
text-indent: -9000px;
padding: 0;
margin: 0; }
#siteThumbs a:hover h1 {
background: url("../images/springmethod.jpg") 0 -241px no-repeat; }
/*media queries*/
/* Smartphones (portrait and landscape) */
#media only screen and (min-width: 0px) and (max-width: 767px) {
header h2 {
font-size: 1.5em; } }
You can nest the h1 within a div, setting the div's width to achieve the desired effect.
<a href="#">
<div style="width: 100px">
<h1>Springmethod.com</h1>
</div>
</a>