I am new to responsive CSS. The code below is a template for a responsive html page. I would like it to normally have 25px margins, but for a cell phone there should not be any margins. I have tried as many combinations of adjustments as I can think of. For example I tried changing the left/right margins for column 1 and 12 for #media but that did not work.
What must I do ?
body { margin:25px; }
* { box-sizing: border-box; }
img {
width: 100%;
height: auto;
}
.row:after {
content: "";
clear: both;
display: table;
}
[class*="col-"] {
float: left;
padding-top: 15px;
width: 100%;
}
#media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%; }
.col-s-2 {width: 16.66%; }
.col-s-3 {width: 25%; }
.col-s-4 {width: 33.33%; }
.col-s-5 {width: 41.66%; }
.col-s-6 {width: 50%; }
.col-s-7 {width: 58.33%; }
.col-s-8 {width: 66.66%; }
.col-s-9 {
width: 75%;
padding: 15px;
}
.col-s-10 {width: 83.33%; }
.col-s-11 {width: 91.66%; }
.col-s-12 {
width: 100%;
padding:15px 0px 0px 0px;
}
}
#media only screen and (min-width: 768px) {
.col-1 {width: 8.33%; }
.col-2 {width: 16.66%; }
.col-3 {width: 25%; }
.col-4 {width: 33.33%; }
.col-5 {width: 41.66%; }
.col-6 {
width: 50%;
padding:0px 15px 15px 15px;
}
.col-7 {width: 58.33%; }
.col-8 {width: 66.66%; }
.col-9 {width: 75%; }
.col-10 {width: 83.33%; }
.col-11 {width: 91.66%; }
.col-12 {
width: 100%;
padding:15px;
}
}
html { font-family: arial; }
.header {
background-color: #9933cc;
color: #fff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover { background-color: #0099cc; }
.aside {
background-color: #33b5e5;
margin-bottom: 15px;
padding: 15px;
color: #fff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.footer {
background-color: #0099cc;
color: #fff;
text-align: center;
font-size: 12px;
padding: 15px;
}
<body>
<div class="header">
<h1>The Island of Crete</h1>
</div>
<div class="row">
<div class="col-3 col-s-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6 col-s-9">
<h1>Chania - A great city</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<!--<img src="img_chania.jpg" width="460" height="345">-->
</div>
<div class="col-3 col-s-12">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
From what I can see, you are using giving the body a margin of 25px at :
body { margin:25px; }
but then not changing it as per your requirements for smaller screens. You are correct in the need for using #media, but the implementation does not modify the margin further.
So basically, what needs to be done is :
/* Responsive layout - when the screen is less than 600px wide,
remove the margin
*/
#media screen and (max-width: 600px) {
body {
margin: 0;
}
}
Your issue is that the body is set to have a margin of 25px at the top of your stylesheet - therefore regardless of what you do with the column sizes, it will always use the 25px margin for the page as a whole.
In your media queries, insert the following:
body {
margin: 0;
}
As the media queries take place lower down the page than your initial assignment, it will override the previous margin - please note that this won't always work for higher end phones with high resolution screens (for example, the Galaxy S8 has a resolution width of 1440px).
Related
My row with columns works great, but on smaller screens it is aligned to left, which should be centered. I have tried hundreds tutorials without any positive results. It must be simple, thx in advance for any help :)
HTML:
<div class="container">
<div id="offer" class="row">
<div class="column">
<div class="box">
</div>
</div>
<div class="column">
<div class="box">
</div>
</div>
<div class="column">
</div>
</div>
</div>
</div>
CSS:
/* Offer start Section*/
.container {
text-align:center;
margin:0 auto;
}
.container .row {
display:inline-block;
vertical-align: middle;
float: none;
}
.column {
width: 33.33%;
padding-right: 0;
padding-left: 0;
margin: -10px;
}
#media screen and (max-width: 767.98px) {
.column {
width: 100%!important;
}
}
#media screen and (max-width: 991.98px) {
.column {
width: 50%;
}
}
.row {
text-align:center;
margin:0 auto;
}
.row .column {
display:inline-block;
vertical-align: middle;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box {
width: 300px;
padding: 10px;
margin: 30px;
box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
border-radius: 30px 30px 30px 30px;
border: 0px solid #fff;
text-align: center;
}
I was trying to do it as a grid, inline-grid and other different styles. Inline-block works perfect, but not responsive. Probably the solution is simple. THX!
I'm not sure if you really do need to change your row to get the result you are after try the following: https://jsfiddle.net/s4qkgjeL/1/
The only thing to change was adding position: relative and display: inline-block to .box because you already have a width and a margin set for this class adding the two mentioned properties will ensure they are always centre aligned.
/* Offer start Section*/
.container {
text-align:center;
margin:0 auto;
}
.container .row {
display:inline-block;
vertical-align: middle;
float: none;
}
.column {
width: 33.33%;
padding-right: 0;
padding-left: 0;
margin: -10px;
}
#media screen and (max-width: 767.98px) {
.column {
width: 100%!important;
}
}
#media screen and (max-width: 991.98px) {
.column {
width: 50%;
}
}
.row {
text-align:center;
margin:0 auto;
}
.row .column {
display:inline-block;
vertical-align: middle;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box {
position: relative;
display: inline-block;
width: 300px;
padding: 10px;
margin: 30px;
box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
border-radius: 30px 30px 30px 30px;
border: 0px solid #fff;
text-align: center;
}
<div class="container">
<div id="offer" class="row">
<div class="column">
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
</div>
</div>
</div>
I am improving my css skills on w3schools, my question is what is the
reason .col-2 is under .col-6?
Isn't it suppose to be under .col-3?
I have put float left so .col-2 should go under .col-3, for over 1 hour looking for reason.
The code will not run until you click the "Run" button in the Tryit Editor.
change col-2 and col-3 to this:
.col-3{
float: left;
padding: 0 15px;
}
.col-2{
float: left;
padding: 0 15px;
clear: left;
}
* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: table;
}
.col-3 {
float: left;
padding: 0 15px;
}
.col-2 {
float: left;
padding: 0 15px;
clear: left;
}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.menu li:hover {
background-color: #0099cc;
}
.aside {
background-color: #33b5e5;
padding: 15px;
color: #ffffff;
text-align: center;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 12px;
padding: 15px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-6">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
</div>
<div class="col-2">
<div class="aside">
<h2>What?</h2>
<p>Chania is a city on the island of Crete.</p>
<h2>Where?</h2>
<p>Crete is a Greek island in the Mediterranean Sea.</p>
<h2>How?</h2>
<p>You can reach Chania airport from all over Europe.</p>
</div>
</div>
</div>
<div class="footer">
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
if you want every box to sit next to each other put in col 6 aswell float: left
I'm trying to build a page where 1 div will be chosen according to the page width. I've checked and rechecked my whole code from upside down and can't seen to figure out what's wrong.
For example, we have:
1
2
3
4
5
If the page is over 800 pixels width, then it will only display the div 5.
If the page is 320 pixels width, it will display the div 1, if 480 pixels width, then div 2, and so on...
Here:
<style> body { margin:0; color:#FFFFFF; font-size:large; }
/* */
#media screen and (max-width: 324px) {
#graficorelatorio1 {
overflow: hidden;
width: 254px;
height: 153px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
}
#graficorelatorio2, #graficorelatorio3, #graficorelatorio4, #graficorelatorio5 { display:none;
}
}
/* */
#media screen and (max-width: 490px) and (min-width: 325px){
#graficorelatorio2 {
overflow: hidden;
width: 324px;
height: 194px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio3, #graficorelatorio4, #graficorelatorio5 { display:none;
}
}
/* */
#media screen and (max-width: 624px) and (min-width: 491px) {
#graficorelatorio3 {
overflow: hidden;
width: 483px;
height: 228px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio4, #graficorelatorio5 { display:none;
}
}
/* */#media screen and (max-width:839px) and (min-width: 625px) {
#graficorelatorio4 {
overflow: hidden;
width: 624px;
height: 289px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio3, #graficorelatorio5 { display:none;
}
}
/**/
#media screen and and (min-width: 840px) {
#graficorelatorio5 {
overflow: hidden;
width: 841px;
height: 321px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
}
#graficorelatorio1, #graficorelatorio2, #graficorelatorio3, #graficorelatorio4 { display:none;
}
}
#mainrelatorio {
background-color: #134F5C;
overflow:hidden;
padding:0;
margin:0;
display:block;
}
</style>
<div id="mainrelatorio">
<!-- width="254" height="152.3110834864699" -->
<div id="graficorelatorio1">
1
</div>
<!-- width="323.0698621553885" height="193.6110834864699" -->
<div id="graficorelatorio2">
2
</div>
<!-- width="483" height="227.67577137343096"-->
<div id="graficorelatorio3">
3
</div>
<!-- width="623.5" height="288.84898929845417"-->
<div id="graficorelatorio4">
4
</div>
<!-- 841" height="321" -->
<div id="graficorelatorio5">
5
</div>
</div>
Try this one
.show-box {
width: 300px;
height: 300px;
background: crimson;
font-size: 80px;
text-align: center;
color: #fff;
line-height: 275px;
margin: 75px auto;
}
#media only screen and (min-width: 801px) {
.four, .three, .two, .one {
display: none;
}
}
#media only screen and (max-width: 800px) and (min-width: 621px) {
.five, .three, .two, .one {
display: none;
}
}
#media only screen and (max-width: 620px) and (min-width: 421px) {
.five, .four, .two, .one {
display: none;
}
}
#media only screen and (max-width: 420px) and (min-width: 321px) {
.five, .four, .three, .one {
display: none;
}
}
#media only screen and (max-width: 320px) {
.five, .four, .three, .two {
display: none;
}
}
<div class="show-box five">5</div>
<div class="show-box four">4</div>
<div class="show-box three">3</div>
<div class="show-box two">2</div>
<div class="show-box one">1</div>
It is working but you don't see it because the numbers are white with a white background.
Here is your code working with a black background color:
https://jsfiddle.net/2h41ny05/15/
#graficorelatorio1 {
overflow: hidden;
width: 254px;
height: 153px;
clear:both;
margin-left: auto;
margin-right: auto;
margin-bottom:1rem;
margin-top:1rem;
background-color: black;
}
I have two responsive divs side by side.
When screen size is smaller than 600px wide, those two divs rearrange one on top of the other, like they should do, BUT... I can't get those two divs to be flexible and 100% wide when screen size gets smaller than 600px.
I've tried flexbox and many other things but just can't get divs flexible. Anyone knows?
body
{
background-color: #fcfcfc;
}
.columns
{
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div
{
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text, .right-text
{ text-align:justify;
}
#media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
You need to also make width:100% in addition to specifying the max-width:100%. You also need to add box-sizing:border-box; to avoid some overflow due to the use of padding.
Check the full code, i used 800px instead of 600px so we can see the result here.
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 800px) {
.left-div,
.right-div {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
Display your elements as block so that they can occupy the full horizontal width available, e.g: display: block;
And for good measure, declare width: 100%
#media screen and (max-width: 600px) {
.left-div,
.right-div {
max-width: 100%;
/* Additional */
width: 100%;
display: block;
}
}
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 600px) {
.left-div,
.right-div {
max-width: 100%;
/* Additional */
width: 100%;
display: block;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
Or you could "Just use Flex"...
#media screen and (max-width: 600px) {
.columns {
display: flex;
justify-content: center;
flex-direction: column;
}
.left-div,
.right-div {
max-width: 100%;
}
}
body {
background-color: #fcfcfc;
}
.columns {
text-align: center;
padding-right: 15px;
padding-left: 15px;
padding-top: 0;
}
.left-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
vertical-align: top;
}
.right-div {
display: inline-block;
max-width: 400px;
text-align: left;
padding: 10px;
background-color: #ddd;
border-radius: 3px;
margin: 5px;
}
.left-text,
.right-text {
text-align: justify;
}
#media screen and (max-width: 600px) {
.columns {
display: flex;
justify-content: center;
flex-direction: column;
}
.left-div,
.right-div {
max-width: 100%;
}
}
<div class="columns">
<div class="left-div left-text">
<p> Lorem ipsum LEFT.</p>
</div>
<div class="right-div right-text">
<p> Lorem ipsum RIGHT.</p>
</div>
</div>
Heads up! flex-box has poor or limited support for legacy browsers, so if this is going to be a concern for you, it's probably better not to use it in production.
IE <= 9 - Not Supported
IE 10,11 - Partial Support
See more: https://caniuse.com/#feat=flexbox
Edit: As #TemaniAfif has pointed out in the comments, you should set a border-box property as well, e.g: box-sizing: border-box
.left-text,
.right-text {
text-align: justify;
box-sizing: border-box;
}
Typically, this is set as a global rule, using a global selector, e.g: * { box-sizing: border-box; }
border-box tells the browser to account for any border and padding
in the value you specify for width and height. If you set an element's
width to 100 pixels, that 100 pixels will include any border or
padding you added, and the content box will shrink to absorb that
extra width. This typically makes it much easier to size elements.
Want to learn more? https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
I've just upgraded my site to include responsive styles, but when I uploaded the changes, the fallback (original / fluid) styles don't work. It just uses the highest min-width responsive styles. What did I do wrong?
My site is http://jcwebandgraphic.com/
HTML
<body>
<!-- #nav-bkg: Nav BKG Image Scrollstop -->
<div id='nav-bkg' class='scroll'>
<img src='images/dandelion-nav-color.png'>
<img src='images/dandelion-nav.png'>
</div> <!-- Closes #nav-bkg -->
<!-- nav: Top Nav -->
<nav role='navigation'>
<ul>
<li><a href='#services-section'>Services</a></li>
<!--
<li><a href='#products-section'>Products</a></li>
-->
<li><a href='#work-section'>Work</a></li>
<li><a href='#contact-section'>Contact</a></li>
</ul>
</nav> <!-- Closes Top Nav -->
<!-- #logo: Logo -->
<div id='logo-container'>
<img id='logo' src='images/logo2.png'>
</div> <!-- Closes #logo -->
<!-- #page-wrapper Page Wrapper -->
<div id='page-wrapper' role='main'>
<!-- .scroll: Site BKG Image Scrollstop -->
<div class='scroll'>
<img src='images/dandelion-color.jpg'>
<img src='images/dandelion-greyscale.jpg'>
</div> <!-- Closes .scroll -->
<!-- #about-section: About Me-->
<section id='about-section'>
<h2 class='subtitle'>About Us</h2>
<p>
Welcome! We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web development, graphic design, hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for all your modern web, printing, and signage needs. Check out our remarkably affordable rates below or request a quote for our best pricing option.
</p>
</section> <!-- Closes #about-section -->
<!-- #services-section: Service Types Offered -->
<section id='services-section' class='main-section-styles'>
<h2 class='subtitle'>Services</h2>
<!-- .fa-icon: Large FA Icon Container -->
<div id='fa-icon'>
<div class='icon'>
<i class='fa fa-laptop icon-fixed-width fa-3x'></i>
<h5>Web</h5>
</div>
<div class='icon'>
<i class='fa fa-magic icon-fixed-width fa-3x'></i>
<h5>Graphic</h5>
</div>
<div class='icon'>
<i class='fa fa-connectdevelop icon-fixed-width fa-3x'></i>
<h5>Hosting</h5>
</div>
<div class='icon'>
<i class='fa fa-wrench icon-fixed-width fa-3x'></i>
<h5>IT</h5>
</div>
</div> <!-- Closes .fa-icon -->
</section> <!-- Closes #services-section -->
<!-- #specials: Specials -->
<section id='specials' class='main-section-styles'>
<h2 class='subtitle'>Specials</h2>
<div class='offer'>
<p>
Static Single-Page Site just $99!
</p>
<p>
2 Years of Hosting + IT just $75!
</p>
<br>
<span>
Offers end November 1st, 2015
</span>
</div>
</section> <!-- Closes #specials -->
<!-- #work-section: Portfolio Examples -->
<section id='work-section' class='main-section-styles'>
<h2 class='subtitle'>Work</h2>
<ul class='slider'>
<img src='images/africanbn.png' alt='Professional Project: The African Bridge Project'>
<img src='images/air.jpg' alt='Professional Project: Audio Information Radio'>
<img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'>
<img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'>
<img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'>
<img src='images/placestory.jpg' alt='Student Project: This is Me'>
<img src='images/sote.jpg' alt='Professional Project: Spa of the Earth'>
<img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'>
</ul>
</section>
<!-- #contact-section: Contact Form & Info -->
<section id='contact-section' class='main-section-styles'>
<h2 class='subtitle'>Contact</h2>
<br><br>
Phone: <a href='callto:+13602810359'> 360-281-0359</a>
<address>Email: <a href='mailto:info#jcwebandgraphic.com'> info#jcwebandgraphic.com</a></address>
<br>
<div id='contactform'>
<form action='contact.php' method='post'>
<div class='contact-wrap'>
<p>Your Name :<input class='type' type='text' name='cf_name'></p>
<p>Your E-mail:<input class='type' type='text' name='cf_email'></p>
<p class='antispam'>Spam-Bots!:<input class='type' type='text' name='url' placeholder='** Leave Blank **'></p>
</div>
<div class='contact-wrap'>
<p id='message'>
Message:
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</p>
</div>
</form>
</div> <!-- Closes #contactform -->
</section> <!-- Closes #contact-section -->
<footer>
<p id='copyright'>
© JC Web & Graphic 2015
</p>
<!--
<p>
<a href='resume.pdf' target='_blank'>Download Resume</a>
</p>
-->
</footer>
</div> <!-- Closes #page-wrapper -->
</body>
</html>
CSS Fallback
#media screen and (min-width: 1000px) {
body {
width: 100%;
background-color: #696773;
}
footer {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
/* **************************************** Menu Styles **************************************** */
nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 600;
}
nav ul {
width: 100%;
}
nav ul li {
width: 30.333%;
padding: 1.5%;
text-align: center;
text-decoration: none;
list-style-type: none;
float: left;
}
nav ul li a {
width: 98%;
padding: 2% 7%;
text-decoration: none;
color: #ffffff;
}
nav ul li a:hover {
color: #ffffff;
outline: 1px solid #ffffff;
}
#nav-bkg {
z-index: 500;
}
/* **************************************** Logo Styles **************************************** */
#logo-container {
width: 20%;
margin: 20% 40% 3% 40%;
}
#logo {
width: 100%;
}
/* ************************************* Scrollstop Styles ************************************* */
.scroll {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
.scroll img {
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.scroll img:first-child {
opacity: 1;
}
.scroll img:nth-child(2) {
opacity: 1;
transition-duration: 1s;
transition-timing-function: ease;
}
/* ************************************ Main Content Styles ************************************ */
section {
width: 90%;
margin: 0;
margin-top: 1%;
padding: 5%;
background-color: #ffffff;
color: #696773;
overflow: auto;
}
.subtitle {
font-family: 'hipstelveticaultralight';
font-size: 1.9em;
font-weight: 200;
color: #50E5C0;
}
/* Services Section Styles */
#services-section {
width: 34%;
height: 350px;
margin: 2% 1% 2% 5%;
background-color: #696773;
float: left;
opacity: .95;
}
#services-section .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#services-section #fa-icon {
width: 100%;
text-align: center;
}
#services-section #fa-icon .icon {
width: 25%;
color: #f26da5;
float: left;
}
#services-section #fa-icon i {
padding-bottom: 15%;
}
#services-section h5 {
margin-top: 10%;
font-size: .75em;
text-align: center;
color: #ffffff;
border-top: 1px solid #ffffff;
}
/* Specials Section Styles */
#specials {
width: 34%;
height: 350px;
margin: 2% 5% 2% 1%;
background-color: #696773;
color: #ffffff;
float: right;
opacity: .95;
}
#specials .subtitle {
margin-bottom: 15%;
font-size: 1.5em;
color: #ffffff;
}
#specials p {
color: #50E5C0;
}
#specials span {
margin-top: 1em;
font-size: .7em;
float: right;
}
/* Work Section Styles */
#work-section {
width: 80%;
margin: 0 5%;
}
#work-section img {
width: 22%;
padding: 1%;
box-shadow: 0 0 8px #696773;
}
/* Contact Section Styles */
#contact-section {
margin-top: 5%;
color: #ffffff;
background-color: #696773;
opacity: .95;
}
#contact-section .subtitle {
color: #ffffff;
}
.contact-wrap {
width: 50%;
float: left;
}
#contact-section address {
font-style: normal;
}
#contact-section p {
text-indent: 2em;
}
#contact-section p .type {
width: 75%;
margin: .5%;
padding: .5%;
font-size: 1em;
color: #ffffff;
background-color: #696773;
border-radius: 5px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section a {
color: #ffffff;
text-decoration: none;
font-style: normal;
}
#contact-section a:hover {
text-decoration: underline;
}
.antispam ::-webkit-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-moz-placeholder { /* Firefox 18- */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
::-moz-placeholder { /* Firefox 19+ */
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
:-ms-input-placeholder {
background-color: #50E5C0;
color: #ffffff;
opacity: 1;
}
#contact-section textarea {
width: 78%;
margin: .5%;
padding: .5%;
color: #ffffff;
background-color: #696773;
border-radius: 3px;
border: 2px solid #00FFD4;
opacity: .75;
}
#contact-section #message .button {
width: 20%;
margin: 1.5%;
font-size: .75em;
color: #696773;
background-color: #ffffff;
border: initial;
border-radius: 5px;
border: 1px solid #CCC0B7;
float: right;
}
#contact-section #message .button:hover {
color: #ffffff;
background-color: #696773;
}
/* Footer Section Styles */
footer #copyright {
margin-top: 10%;
padding: .5%;
text-align: center;
color: #686673;
background-color: #ffffff;
}
footer p {
text-align: center;
}
footer a {
padding: 0;
color: #F26DA5;
}
}
CSS Responsive
#media screen and (min-width: 300px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: hidden;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 70%;
margin: 40% 15% 25% 15%;
}
#logo-container img {
opacity: 1!important;
}
/* ************************************ Menu Styles ************************************ */
nav {
height: 30px;
padding-bottom: 1em;
background-color: #696773;
}
nav a {
font-size: .75em;
}
nav ul li a:hover {
outline: initial;
font-size: 1em;
}
#nav-bkg img {
visibility: hidden;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.25em;
}
p {
font-size: .85em;
text-align: justify;
}
#services-section {
width: 80%;
margin: 5% 10%;
padding: 0;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
#services-section h5 {
margin: 0;
padding: 0;
font-size: 1em;
border-top: none;
}
#specials {
width: 80%;
margin: 5% 10%;
padding: 0;
float: right;
}
#work-section {
width: 100%;
margin: 0;
padding: 0;
}
#work-section .slider img {
width: 96%;
margin: 2%;
padding: 0;
}
#contact-section {
width: 90%;
margin: 15% 0;
padding: 5%;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contact-section p {
width: 100%;
margin: 0;
padding: 0;
text-align: left;
}
#contact-section p .type {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section .contact-wrap {
width: 100%;
margin: 0;
padding: 0;
float: left;
}
#contactform {
margin-top: 15%;
}
#contact-section textarea {
width: 100%;
margin: 0;
padding: 0;
}
#contact-section #message .button {
width: 50%;
margin: 0;
padding: 0;
}
br {
display: none;
}
}
#media screen and (min-width: 500px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
margin: 45% 15%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
font-size: 1.5em;
}
p {
font-size: 1em;
}
#about-section {
width: 70%;
padding: 10% 15% 20% 15%;
}
#about-section p {
padding-bottom: 20%;
border-bottom: 1px solid #696773;
}
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#specials {
margin: 5% 10% 25% 10%;
}
}
#media screen and (min-width: 600px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 50%;
margin: 45% 25%;
}
/* ******************************** Main Content Styles ******************************** */
.subtitle {
padding: 3%;
font-size: 1.5em;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: .65em;
color: #f26da5;
float: left;
}
}
#media screen and (min-width: 700px) {
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 40%;
margin: 40% 30%;
}
/* ************************************ Menu Styles ************************************ */
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
height: 400px;
}
#services-section #fa-icon .icon {
width: 50%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
height: 400px;
padding: 0;
float: right;
}
#work-section .slider img {
width: 46%;
margin: 2%;
float: left;
}
}
#media screen and (min-width: 900px) and (max-width: 999px) {
/* ********************************* Scrollstop Styles ********************************* */
.scroll img {
visibility: visible;
}
/* ************************************ Logo Styles ************************************ */
#logo-container {
width: 30%;
margin: 15% 35%;
}
#logo-container img {
opacity: 1;
}
/* ************************************ Menu Styles ************************************ */
nav {
background-color: initial;
}
nav a {
font-size: 1em;
}
nav ul li a:hover {
outline: 1px solid #ffffff;
}
#nav-bkg img {
visibility: visible;
}
/* ******************************** Main Content Styles ******************************** */
#services-section {
margin: 5% 10% 25% 10%;
padding: 10% 0 20% 0;
border-bottom: 1px solid #ffffff;
}
#services-section {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
border: none;
}
#services-section #fa-icon .icon {
width: 25%;
margin: 0 0 15% 0;
padding: 0;
font-size: 1em;
color: #f26da5;
float: left;
}
#specials {
width: 80%;
margin: 5%;
padding: 5%;
height: 350px;
float: right;
}
#work-section {
padding-bottom: 5%;
}
#work-section .slider img {
width: 23%;
margin: 1%;
float: left;
}
#contact-section .subtitle {
margin-bottom: 10%;
}
#contactform {
margin-top: 5%;
}
}
Because both sections are defined as min-width, both sections will be applied when the display area is over 1000px and only the min-width:300 section will be applied when it is over 300px.
Since both sections are applied, the browser will resort to the standard css rules for prioritization of similar styles. (see http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)
If you want to be more explicit, you could specify:
#media screen and (min-width: 300px) and (max-width: 999px)
and your responsive styles will stop getting applied after that point.
------------------ edit in response to comment:
If I am understanding what you are looking for it would require the ability to nest the #media queries, but it is not supported.
eg:
#media screen and (max-width:999px)
{
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
}
This way your responsive styles would stop at 999px but they would be cumulative up until that point?
I believe the only way to accomplish writing this logically would be to use LESS or SCSS. Which would compile your css and rewrite it exactly the way you are trying to avoid...
I think the best you can do would be:
#media screen and (min-width:300px) and (max-width:999px)
{ }
#media screen and (min-width:600px) and (max-width:999px)
{ }
#media screen and (min-width:900px) and (max-width:999px)
{ }
Or better yet try something like this:
#import url(responsive.css) screen and (max-width: 999px);
and in responsive.css:
#media screen and (min-width:300px)
{ }
#media screen and (min-width:600px)
{ }
#media screen and (min-width:900px)
{ }
This was suggested in another thread I saw: Nesting #media rules in CSS