Text alignment issue- H4 content displays to the right of images - html

Any tips on how to align the H4 text on the projects section so that it appears beneath the images rather than to right of them? This doesn't appear to correspond to the HTML whereby the H4 follows the img tag. In order to align items along the the horizontal and vertical axis I have been using css grids.
Many thanks!
/*Reset */
li {
list-style-type: none;
}
body,p,a,ul,li {
margin: 0;
padding: 0;
text-decoration: none;
}
/*Base styles*/
body {
background: var(--secondary);
overflow-x: hidden;
font-family: 'Rubik-VariableFont_wght';
}
.button {
background: none;
border: 2px solid var(--primary);
color: var(--primary);
padding: 6px 12px;
border-radius: 20px;
text-transform: uppercase;
box-shadow: 1px 2px 3px rgba(0,0,0,0.6);
display: inline-block;
}
.button:hover {
color: #222;
background: var(--primary);
}
input,textarea {
background-color: rgba(255, 255, 255, 0.05);
padding: 10px 16px;
border-radius: 20px;
border: 2px solid #9893d8;
color: #f2f2f2;
}
/*Fonts*/
#font-face {
font-family:'Rubik-VariableFont_wght';
src:url('/fonts/Rubik-VariableFont_wght.ttf')
}
h1,h2,h3,h4 {
color: #0077b3;
font-weight: normal;
}
p,a,li {
color: ##0077b3;
}
h1,h3 {
font-size: 1.2em;
}
h2 {
font-size:1.6em;
}
h4 {
font-size: 1.1em;
}
.leading {
font-size: 1.1em;
}
/*Mobile/default styles*/
.grid {
display: grid;
grid-template-columns: repeat (8,1fr);
gap: 10px;
}
#portfolio {
background-image: url('images/spaceimg.png');
background-size: cover;
background-repeat: no-repeat;
background-position: bottom;
padding: 30px 20px;
}
#portfolio h3 {
margin-bottom: 0;
text-align: center;
}
.projects a {
grid-column: 1/9;
margin: 20px 0;
display: flex;
}
.projects a *{
margin: 0 20px;
max-width: 40%;
align-self: center;
}
.projects h4 {
color: #0077b3;
}
.projects img {
box-shadow: 30px #222;
}
.projects img {
border-radius: 60px;
}
.projects {
margin-top:40px;
}
.projects a {
grid-column: span 4;
margin: 20px 0;
}
.projects .row-one {
grid-row:1;
}
.projects img {
width: 500px;
height: 100px;
border-radius: 20px;
}
.projects .row-three {
grid-column: 3/7;
}
.projects a * {
margin: 10px auto;
max-width:30%;
height: 120px;
vertical-align: text-bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example site</title>
<link rel="stylesheet" href="styles1.css">
</head>
<body>
<section id="portfolio">
<!--Project section-->
<h3>Example site</h3>
<div class="grid projects">
<a href="#">
<img src="images/image3.png" alt="shuttle-image1" >
<h4>Space race one</h4>
</a>
<a href="#">
<img src="images/image4.png" alt="shuttle-image2">
<h4>Space race two</h4>
</a>
<a href="#" class="row-three">
<img src="images/image5.png" alt="shuttle-image3">
<h4>Space race three</h4>
</a>
</div>
</section>
</body>
</html>

Related

CSS ~ How to align an elements right to another element(s)?

Sorry for the vague title , i'm fairly new to CSS and I have a problem with aligning a scroll box exactly to the right of another element
my page looks like this now:
I want it to look like this (i did some editing):
here is my html code and css styling of the boxes:
.center {
margin: auto;
width: 60%;
padding: 10px;
font-family: Helvetica;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>
EDIT: added CSS file some styles in the css files aren't related to this example page , I just made this example page out from bigger page for clarifying purposes

I've added display: inline-block; / removed padding: 10px; to your .center css to achieve the desired result.
.center {
margin: auto;
width: 60%;
font-family: Helvetica;
display: inline-block;
}
li{
color: lightgray;
border: 1px solid;
border-color: #8056c7;
width: 60%;
padding: 10px;
margin-right: 10px;
}
.box
{
background-color: whitesmoke;
}
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; border-radius: 25px; margin-bottom: 13px; padding: 11px;}
#messages li:nth-child(odd) { background:#444a57 ; }
#msgbt,#bt
{
background-color: #7850c0;
border-color: #7850c0;
}
::-webkit-scrollbar {
width:5px;
height:8px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(53, 57, 71, 0.849);
width: 6px;
height: 6px;
-webkit-border-radius: 4px;
}
#row1 {
padding: 20px 20px 5px 20px;
overflow: hidden;
}
.button-container {
display: flex; /* displays flex-items (children) inline */
justify-content: space-between; /* MDN: The items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same. */
align-items: center; /* centers them vertically */
}
.button-left {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-right {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
.button-centre {
padding: 0 5px;
text-align: center;
font-size: 15px;
font-family:Verdana;
font-weight: lighter;
}
p{
color: whitesmoke;
}
#border
{
background-color: #282c34;
border: 1px solid;
border-color: #6e4bac;
border-radius: 25px;
}
body {
background-color: #252839;
color: #FFF;
padding: 10px;
}
.container {max-width: 500px; position: relative; margin: 0 auto;}
.center { margin: 0 auto;}
.terminal {
animation: blink 1s infinite step-end;
}
#keyframes blink {
from, to { opacity: 0; }
50% {opacity: 1;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="styles2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
</head>
<body style="background-color: #21252b;">
<h1 style="color: lightgrey; text-align: center;">placeholder</h1>
<div class="center">
<div class="jumbotron" id="border" >
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; max-height: 640px; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; scroll-behavior: smooth;">
<div id="spot" >
</div>
</div>
</div>
</div>
<div id="messages" style="height:auto;width:auto;border:1px solid #6e4bac; overflow:auto; border-radius: 25px; padding: 15px; background-color: #282c3469; float: right;">
<h1 style="color: white;">placeholder</h1>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
<p>placeholder</p>
</div>

Image overlapping Burger Navigation Menu made with CSS and HTML

I am having an issue with this new website for my local Church. I followed this tutorial to create a burger menu with just HTML and CSS: https://www.youtube.com/watch?v=xMTs8tAapnQ&list=PLu-osytzWPuUXmu5BZTuHNRyMBpZS1bsG&index=4&t=0s
Now after learning how to do it, the issue I am running into is I am trying to put an image in the body under the navigation menus, however, when I make my web resolution smaller and click on the burger menu. It is under the image.
I appreciate any help, I tried to look for it everywhere, or I tried at least. I am new to coding. So thank you for your time spent helping me. I really do appreciate it.
**HTML**
<!DOCTYPE html>
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" contet="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> The Church of Christ </h1>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Contact
About
<span>Members</span>
</div>
</div>
<h2> location </h2>
<img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>
**CSS**
html, body {width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}

just remove css clear:right and add float:right
.menu {
margin: 0 30px 0 0;
float: right;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}

An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
/* this line changed */
position: relative;
}
.menu {
margin: 0 30px 0 0;
}
/* i advice,that a tag will made bacgraund-color,because when dropdown menu covering image */
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
/* background-color: blue; */
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}

Where did all the text go on mobile site? Elements not appearing on iPhone.

I have created a website for my dad as a favour for putting me through design school. After uploading it to the network hosting site that my dad uses I discovered that when opening the site on my iPhone, all the text (or most of it) completely disappears. I am not sure what is doing this because when I test the site through Chrome Developer Tools, JsFiddle, etc it appears to be fine. The site is pretty simple so I am using Flexbox for the layout. Let me know if you need any other details.
I am not sure what is going on and would very much appreciate it if someone could take a poke around and point me in the right direction. I am providing a JsFiddle that includes the homepage html and the relevant CSS as well as posting it here. Thanks.
https://jsfiddle.net/ericvnwk/vfnejmw7/2/
The HTML:
<title>
Fairfield Tree Nurseries Inc.</title>
<script src="https://use.typekit.net/hlp7xgg.js"></script>
<script>
try {
Typekit.load({
async: true
});
} catch (e) {}
</script>
<body>
<div class="header">
<img class="logo" src="https://s1.postimg.org/1ic483yqhr/logo.png" alt="Fairfield Tree Nurseries Inc." width="80px" height="80px">
<div class="title"> Fairfield Tree Nurseries Inc.
</div>
<nav class="navbar navtop">
<ul>
<li>About</li>
<li>Products</li>
<li>Shipping</li>
<li>Location</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-border">
</div>
<div class="main">
<div class="fw-content fw-top">
<div class="fw-image">
<img src="https://s1.postimg.org/1ic4840vnj/welcome.jpg" alt="Welcome to Fairfield Tree Nurseries">
</div>
<div class="cntr-type">
<h2> Welcome to </h2>
<h1> Fairfield Tree Nurseries </h1>
</div>
</div>
<div class="arrow">
<div class="down-arrow"></div>
</div>
<div class="fw-content below">
<div class="fw-image">
<img src="https://s1.postimg.org/1lvq5tqycf/about-home.jpg" alt="Welcome to Fairfield Tree Nurseries">
</div>
<div class="cntr-type">
<h4 id="green"> We are a wholesale tree nursery producing field <br> grown nursery stock in the Lower Fraser Valley <br> community of Chilliwack, British Columbia. </h4>
<div class="btn" id="green-btn">
<a href="about.html">
<h3>Learn More</h3></a>
</div>
</div>
</div>
<div class="fw-content">
<div class="fw-image">
<img src="https://s1.postimg.org/51y1xx3dpr/field-wide.jpg" alt="Field wide angle">
</div>
<div class="cntr-type up">
<h4 class="shadow" id="white"> We offer an expanded product line to include a wide <br> range of field grown grafted conifers, specialty broadleaf <br> evergreen/deciduous shrubs and specimen plant material. </h4>
<div class="btn btn-shadow" id="white-btn">
<a href="products.html">
<h3 class="">Discover More</h3></a>
</div>
</div>
</div>
<div class="hw-content hide">
<div class="hw-left">
<div class="cntr-type cntr-type-special">
<h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
<div class="btn" id="white-btn">
<a href="shipping.html">
<h3>Shipping Info</h3></a>
</div>
</div>
</div>
<div class="hw-right">
<img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
<div class="cntr-type cntr-type-special">
<h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
<div class="btn" id="green-btn">
<a href="location.html">
<h3>View Map</h3></a>
</div>
</div>
</div>
</div>
<div class="fw-content hidden-content empty bkg-green">
<div class="cntr-type">
<h4 id="white"> Our products can be found throughout <br> North America and we pride ourselves in <br> providing expert service and support to all <br> of our clients, wherever they are. </h4>
<div class="btn" id="white-btn">
<a href="shipping.html">
<h3>Shipping Info</h3></a>
</div>
</div>
</div>
<div class="fw-content hidden-content">
<div class="fw-image">
<img src="https://s1.postimg.org/2lbtizus33/leaves-sky-wide.jpg">
</div>
<div class="cntr-type">
<h4 id="green"> We are located in the Lower <br> Fraser Valley community of Chilliwack, <br> British Columbia, Canada. </h4>
<div class="btn" id="green-btn">
<a href="location.html">
<h3>View Map</h3></a>
</div>
</div>
</div>
<div class="fw-content empty">
<div class="cntr-type">
<h4 id="green"> For more information or to place an order please contact us, <br> we would love to hear from you. </h4>
<div class="btn" id="green-btn">
<a href="contact.html">
<h3>Contact Us</h3></a>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-main">
<img src="https://s1.postimg.org/8ax5ukoq6n/logo-white.png">
<!--<div class="logo-footer">
</div> -->
<div class="title" style="color: white;"> Fairfield Tree Nurseries </div>
<nav class="navbar navfoot">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Shipping</li>
<li>Location</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="copyright">
<p> © 2017 Fairfield Tree Nurseries Inc. All rights reserved.
</div>
</body>
And the CSS:
body {
margin: 0 auto;
font-family: "proxima-nova-alt", sans-serif;
text-align: center;
position: relative;
color: #707070;
}
/*================ NAV & HEADER STYLES + FOOTER ==================*/
.header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
top: 0;
height: 120px;
padding: 15px 40px 15px 40px;
max-width: 1200px;
margin: 0 auto;
}
.header-border {
background-color: #009948;
height: 2px;
width: 100%;
}
.title {
font-size: 24px;
font-weight: 300;
color: #009948;
padding-left: 20px;
text-align: left;
}
.navbar {
margin-left: auto;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
}
.navbar li {
display: inline-block;
font-weight: 400;
font-size: 16px;
padding-left: 4vw;
}
.navbar a {
text-decoration: none;
color: #969696;
text-transform: uppercase;
letter-spacing: 2px;
transition: .3s color;
}
.navbar a:hover {
color: #009948;
}
.footer {
width: 100%;
max-width: 1200px;
background-color: #333;
}
.footer-main {
height: 200px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
padding: 20px 80px 0px 80px;
margin: 0 auto;
}
.footer h6 a {
transition: .3s color;
}
.footer h6 a:hover {
color: #009948;
}
.copyright {
height: 80px;
padding: 20px;
color: #505050;
background-color: rgba(10, 10, 10, .5);
padding: 40px 80px 10px 80px;
}
.copyright p {
text-align: left;
font-size: 16px;
letter-spacing: 1px;
font-weight: 400;
max-width: 1500px;
margin: 0 auto;
}
.navfoot a {
color: #707070;
transition: .3s color;
}
.navfoot a:hover {
color: white;
}
/*================ PAGES STYLES ===================*/
.main {
max-width: 1500px;
margin: 0 auto;
overflow: hidden;
}
/*=============== Home PAGE ================*/
.fw-content {
display: flex;
flex-direction: column;
width: 100%;
height: 600px;
align-items: center;
justify-content: center;
position: relative;
z-index: 3;
}
.fw-top {
border-top: 2px solid white;
}
.below {
margin-top: -30px;
position: relative;
z-index: 1;
}
.fw-image img {
max-height: 600px;
}
.hw-content {
display: flex;
flex-direction: row;
width: 100%;
height: 600px;
position: relative;
background-color: #009948;
max-width: 1500px;
margin: 0 auto;
margin-top: -2px;
}
.hw-left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50%;
}
.hw-right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
width: 50%;
margin-left: auto;
}
.hw-right img {
height: 600px;
}
.cntr-type {
position: absolute;
left: auto;
}
.up {
margin-top: -60px;
}
.arrow {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
}
.down-arrow {
margin: -2px;
width: 0;
height: 0;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-top: 30px solid #009948;
}
/*================ TEXT STYLES ===================*/
h1 {
font-size: 60px;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
h2 {
margin: 0;
font-size: 36px;
font-weight: 100;
letter-spacing: 2px;
color: white;
text-transform: uppercase;
}
h3 {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
}
h4 {
font-size: 24px;
line-height: 36px;
font-weight: 300;
letter-spacing: 0.1px;
}
h5 {
text-align: left;
font-size: 24px;
font-weight: 400;
color: #009948;
margin: 10px 0 0 0;
letter-spacing: 1px;
}
h6 {
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
margin: 20px 0 0 0;
}
p {
font-size: 20px;
line-height: 28px;
font-weight: 300;
letter-spacing: 0.1px;
text-align: left;
}
a {
text-decoration: none;
color: inherit;
}
.currentlink a {
color: #009948;
}
#green {
color: #009948;
}
#grey {
color: #2f2f2f;
}
#white {
color: #fff;
}
.shadow {
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
/*================ BUTTON STYLES ====================*/
.btn {
width: 150px;
height: 30px;
margin: auto;
border: 2px solid;
border-radius: 20px;
line-height: 30px;
}
.btn a {
text-decoration: none;
}
#green-btn {
background-color: rgba(0, 153, 72, 0);
border-color: #009948;
color: #009948;
transition: .5s background-color, color;
margin-bottom: 15px;
}
#white-btn {
background-color: rgba(255, 255, 255, 0);
border-color: #fff;
color: #fff;
transition: .5s background-color, color;
}
#green-btn:hover {
border-color: #009948;
background-color: rgba(0, 153, 72, 1);
color: #fff;
}
#white-btn:hover {
border-color: #fff;
background-color: rgba(255, 255, 255, 1);
color: #009948;
text-shadow: none;
}
.btn-shadow {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
/*================================
RESPONSIVE Styling
================================*/
#media screen and (min-width:500px) {
.hidden-content {
display: none;
}
}
#media screen and (max-width:500px) {
.header {
flex-direction: column;
height: inherit;
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.title {
text-align: center;
width: 100%;
padding: 0;
margin-top: 10px;
}
.navbar {
margin: 15px 0 0 0;
width: 100%;
padding: 0;
}
.navbar ul {
display: flex;
flex-direction: column;
}
.navbar li {
font-weight: 400;
padding: 7.5px 0 7.5px 0;
border-top: 2px solid #009948;
width: 100%;
}
.navbar a {
text-decoration: none;
width: inherit;
margin: 100px;
}
.navbar a:active {
background-color: white;
color: #009948;
}
.navtop {
padding: 10px 0 0 0;
}
.main {
overflow: hidden;
}
.arrow {
margin-top: -4px;
}
.cntr-type {
padding: 0 5%;
}
.up {
margin-top: 0px;
}
.btn {
width: 120px;
height: 30px;
margin: auto;
border: 2px solid;
border-radius: 20px;
line-height: 30px;
}
.btn-shadow {
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
box-shadow: inset 2px 2px 40px rgba(255, 255, 255, 0.5);
}
.hide {
display: none;
}
.hidden-content {
display: flex;
}
.footer {
flex-direction: column;
justify-content: center;
height: inherit;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
}
.footer-main {
display: flex;
flex-direction: column;
padding: 30px 0 0 0;
height: inherit;
}
.navfoot {
background-color: #707070;
padding: 0px;
}
.navfoot li {
border-color: #333;
}
.navfoot a {
color: #333;
}
.copyright {
padding: 20px 0 0 0;
}
.copyright p {
width: 80%;
}
.questions {
padding-top: 0;
}
.question-box {
margin-top: 30px;
}
/*==============FONT STYLES==============*/
h1 {
font-size: 36px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 10px;
font-weight: 400;
}
h4 {
font-size: 16px;
line-height: 24px;
}
br {
display: none;
}
p {
font-size: 18px;
}
}
#media screen and (max-width:1024px) and (min-width:500px) {
.header {
flex-direction: column;
padding: 20px 0 0 0;
height: inherit;
}
.navbar {
margin: 0;
}
.navtop {
padding: 10px 0 0 0;
}
.title {
margin: 10px 0 10px 0;
}
}
#media screen and (max-width:1024px) {
.fw-content {
height: inherit;
overflow: hidden;
}
.fw-image {
height: inherit;
}
.fw-image img {
width: auto;
height: 45vh;
display: flex;
justify-content: space-between;
}
.fw-top {
border: none;
}
.cntr-type {
padding: 0 10%;
}
.cntr-type-special {
padding: 0;
width: 300px;
}
.cntr-type-special h4 {
font-size: 20px;
line-height: 32px;
}
.empty {
height: 60vh;
}
.empty-s {
height: 40vh;
}
h4 br {
display: none;
}
.question-mark {
margin-top: -30px;
}
}
#media screen and (min-width: 501px) {
.navtop {
padding: 10px 0 10px 0;
}
}
#media screen and (max-width: 700px) {
.bkg-green {
background-color: #009948;
}
.hw-contact .contact-info {
display: none;
}
.contact-info {
width: 75%;
}
.fw-contact {
padding: 15px 0 25px 0;
}
.contact-form {
width: 100%;
}
.contact-form form {
width: 90%;
}
}
#media screen and (min-width:700px) {
.hidden-content2 {
display: none;
}
}
#media screen and (min-width:1240px) {
.header {
max-width: none;
}
.footer {
max-width: none;
}
}
#media screen and (min-width:1580px) {
.header {
padding: 15px 0 15px 0;
max-width: 1500px;
}
.footer-main {
max-width: 1500px;
}
.copyright {}
}

You are adding the hidden-content and hide classes which have display: none in them.

Webpage scaling issue

In reference to my last question here
this time I'm facing issues when webpage scrolls. The content inside 'container' section is overlapping. I've tried to fix this many times but whenever I fix something, some other thing gets broken.
As you can see in the code snippet I've used 3 different stylesheets and custom Grid with 12 rows and 0.5% margin, so the page will show 3 different views according to the resolution. The problems with this code are:
Userinfo class is overlapped by the next class when zoomed.
When page is zoomed to 300%, the class next to 'userinfo' moves away.
Here's the code (I've included only one CSS because I can't find any option to add multiple css):
body {
margin: 0px;
padding: 0px;
font-family: Roboto;
background: #eeeeee;
}
html {
margin: 0px;
padding: 0px;
}
h1 {
font-size: 5.0vw;
}
h2 {
font-family: Roboto Light;
font-size: 30px;
}
h3 {
font-size: 2.5vh;
}
h4 {
font-size: 13px;
}
p {
font-size: 2vh;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
.nav {
font-family: Roboto Light;
height: 40px;
width: 100%;
position: fixed;
background: white;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
font-size: 20px;
width: auto;
padding: 5px;
margin: 5px;
text-decoration: none;
color: black;
text-align: center;
}
.nav a:hover,
.nav a:active {
background-color: #eeeeee;
}
.header {
visibility: hidden;
}
.container {
margin-top: 10%;
margin-left: 20%;
margin-right: 20%;
background: white;
border-radius: 4px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.usericon {
margin-left: 10%;
border-radius: 10%;
width: 176px;
height: 176px;
}
.hire {
background-color: #689f38;
font-family: Roboto;
border-radius: 4px;
border: none;
color: white;
padding: 15px 32px;
outline: none;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
.hire:hover {
background-color: #8bc34a;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.button:active {
background-color: #33691e;
box-shadow: 0px 2px 0px 0px #668e36;
cursor: hand;
}
.line {
border-radius: 1px;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 1% 0 1% 0.5%;
}
.col:first-child {
margin-left: 0;
}
/* GROUPING */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
/* GRID OF TWELVE */
.span_12_of_12 {
width: 100%;
}
.span_11_of_12 {
width: 91.62%;
}
.span_10_of_12 {
width: 83.25%;
}
.span_9_of_12 {
width: 74.87%;
}
.span_8_of_12 {
width: 66.5%;
}
.span_7_of_12 {
width: 58.12%;
}
.span_6_of_12 {
width: 49.75%;
}
.span_5_of_12 {
width: 41.37%;
}
.span_4_of_12 {
width: 33%;
}
.span_3_of_12 {
width: 24.62%;
}
.span_2_of_12 {
width: 16.25%;
}
.span_1_of_12 {
width: 7.875%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
#media only screen and (max-width: 480px) {
.col {
margin: 1% 0 1% 0%;
}
.span_1_of_12,
.span_2_of_12,
.span_3_of_12,
.span_4_of_12,
.span_5_of_12,
.span_6_of_12,
.span_7_of_12,
.span_8_of_12,
.span_9_of_12,
.span_10_of_12,
.span_11_of_12,
.span_12_of_12 {
width: 100%;
}
}
<html>
<head>
<title>
Yogesh Singh
</title>
<meta name="theme-color" content="#4caf50" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
</head>
<body>
<div class="nav">
<nav>
<img src="logo.svg" style="height:40px; float:left;">
About Me
My Projects
</nav>
</div>
<br>
<div class="header">
</div>
<div class="container">
<!-- Rows are horizontal and Columns are vertical-->
<div class="section group">
<div class="col span_3_of_12" style="margin-top:0; max-width:50%;">
<div class="userinfo">
<img src="large.png" class="usericon" srcset="large.png, medium.png, small.png">
</div>
</div>
<div class="col span_6_of_12" style="margin-top:0; max-width:50%;">
<h2>Yogesh Singh</h2>
<h4>cyogesh56#gmail.com</h4>
<p><b style="border: 0.5px solid black;">21</b>
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_10" style="float:right; margin-right:3%;">
<center>
<button class="hire" type="submit" href="http://about.me/cy56">Hire</button>
</center>
</div>
</div>
<hr class="line" style="margin-left:3%; margin-right:3%;">
</body>
</html>

Floating div when resizing

I've tried finding a solution to my problem but to no avail.
I have a website created using media queries. In this project I can't use anything else besides pure HTML and CSS, that's why in order to keep the design clean, I hide some divs on certain widths (I'm referring to the 'play' button in the upper right corner, for instance).
Reproducing the problem:
Resize the window, so that the 'play' button disappears.
Go back to the initial width.
Unfortunately the problem occurs randomly, sometimes everything is perfect, sometimes it happens every single time. I've been able to reproduce it using both Safari 9.0.1 and Google Chrome 46.0.2490.86 running on OS X Yosemite 10.11.1.
Please find images explaining the issue below:
How it's supposed to look
How it looks upon resizing back
Thank you in advance for any help!
Code:
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>

just move your "play" div inside "artist-album"
body
{
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #7d7d7d;
background-color: #f0f3f6;
margin: 0 auto;
max-width: 1200px;
}
a:link, a:visited
{
color: #e88d8a;
text-decoration: none;
}
a:hover, a:active
{
color: #dd5555;
}
.container
{
margin: 0px 15px 30px 15px;
}
aside
{
width: 25%;
float: left;
}
section
{
width: 75%;
float: left;
}
header
{
color: #ffffff;
background-color: #dd5555;
font-size: 1.15em;
font-weight: bold;
text-transform: uppercase;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding: 15px 15px 15px 20px;
}
h3
{
color: #dd5555;
}
.profile
{
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
padding: 30px 30px 20px 30px;
margin: 30px 15px 0px 15px;
}
.img-circle
{
border-radius: 50%;
width: 100%;
max-width: 200px;
}
.img-rounded
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.profile-info
{
margin-bottom: 10px;
}
.name
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
margin: 20px 0px 5px 0px;
}
.social-icons i
{
display: inline-block;
padding: 10px;
}
.social-icons a:link, .social-icons a:visited
{
color: #e88d8a;
text-decoration: none;
}
.social-icons a:hover, .social-icons a:active
{
color: #dd5555;
}
nav
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
}
.nav-content ul
{
list-style-type: none;
padding: 10px 0px 10px 0px;
margin: 0;
}
.nav-content i
{
width: 15px;
margin-right: 15px;
}
.nav-content a:link, .nav-content a:visited
{
display: block;
color: #e88d8a;
font-size: 1.14em;
font-weight: 600;
text-decoration: none;
padding: 10px 20px 10px 20px;
}
.nav-content a:hover, .nav-content a:active
{
color: #dd5555;
}
.quote
{
display: flex;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 30px 15px;
}
blockquote
{
background: url(img/open_quote.svg) no-repeat left -5px, url(img/close_quote.svg) no-repeat right bottom -8px;
background-size: 30px 30px;
min-height:30px;
padding: 5px 30px 0 30px;
margin: 0px;
}
.quote-left
{
text-align: center;
float: left;
width: 450px;
padding: 20px 50px 20px 35px;
}
.quote-right
{
float: left;
padding: 20px 25px 10px 0px;
}
.quote-right-768
{
display: none;
}
.track-title
{
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link
{
display: none;
color: #dd5555;
font-size: 1.2em;
font-weight: bold;
}
.track-title-link a:link, .track-title-link a:visited
{
color: #e88d8a;
text-decoration: none;
}
.track-title-link a:hover, .track-title-link a:active
{
color: #dd5555;
}
.play
{
float: left;
margin: 10px 10px 10px 0;
}
.play a:link, .play a:visited
{
color: #7d7d7d;
text-decoration: none;
}
.play a:hover, .play a:active
{
color: #dd5555;
}
.artist-album
{
float: left;
padding: 10px 10px 0px 0px;
}
.artist-album span
{
font-weight: bold;
}
.content
{
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
clear: both;
margin: 0px 15px;
}
article
{
padding: 2px 20px 4px 20px;
}
.gallery
{
text-align: center;
margin: 15px;
}
.links
{
font-weight: 600;
margin: 15px 15px 15px 20px;
}
.links ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
.links li
{
margin-bottom: 5px;
}
.floating-box
{
display: inline-block;
width: 200px;
height: 200px;
margin: 10px;
}
.responsive-container
{
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.responsive-container iframe
{
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
.clear
{
clear: both;
}
footer
{
color: #7d7d7d;
text-align: center;
background-color: #f9f9f9;
border-radius: 5px;
box-shadow: 0 0 5px #d1d4d7, 0 4px 2px -2px #dee1e4;
margin: 30px 15px 0px 15px;
padding: 15px 0px 15px 0px;
}
footer > br
{
display: none;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px)
{
aside
{
width: 25%;
}
section
{
width: 75%;
}
.quote-right
{
padding: 20px 25px 20px 0px;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 1080px)
{
aside
{
width: 30%;
}
section
{
width: 70%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px)
{
aside
{
width: 35%;
}
section
{
width: 65%;
}
.quote-left
{
padding: 20px 20px 20px 15px;
}
.quote-right
{
display: none;
}
.quote-right-768
{
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
}
/* Custom, BlackBerry Playbook */
#media only screen and (max-width : 600px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.track-title-link
{
display: none;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone 6 */
#media only screen and (max-width : 375px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 10px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: block;
}
.play
{
display: inline-block;
}
footer > br
{
display: inline-block;
}
}
/* Custom, Blackberry Z30 */
#media only screen and (max-width : 360px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 20px 20px;
}
.quote-right-768
{
display: none;
}
.track-title
{
display: none;
}
.track-title-link
{
display: inline-block;
}
.play
{
display: none;
}
footer > br
{
display: inline-block;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px)
{
aside
{
width: 100%;
}
section
{
width: 100%;
}
.quote
{
flex-direction: column;
padding-right: 20px;
}
blockquote
{
margin-right: 20px;
}
.quote-left
{
width: 100%;
padding: 20px;
}
.quote-right
{
display: inline-block;
padding: 5px 0px 15px 20px;
}
.quote-right-768
{
display: none;
}
.gallery
{
margin: 15px 0px 15px 0px;
}
footer > br
{
display: inline-block;
}
}
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<!-- RWD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom stylesheet-->
<link href="style.css" rel="stylesheet">
<!-- Include Open Sans Font -->
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic&subset=latin,greek-ext,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Include Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<aside>
<div class="profile">
<img class="img-circle" src="img/p_pic.png">
<div class="profile-info">
<div class="name">Jakub Jas</div>
Kraków, Polska
</div>
<div class="social-icons">
<i class="fa fa-facebook-official fa-2x"></i>
<i class="fa fa-lastfm fa-2x"></i>
<i class="fa fa-soundcloud fa-2x"></i>
</div>
</div>
<nav>
<header>Menu</header>
<div class="nav-content">
<ul>
<li><i class="fa fa-home"></i>Strona główna</li>
<li><i class="fa fa-music"></i>Muzyka</li>
<li><i class="fa fa-camera-retro"></i>Fotografia</li>
<li><i class="fa fa-desktop"></i>Grafika</li>
<li><i class="fa fa-envelope"></i>Kontakt</li>
</ul>
</div>
</nav>
</aside>
<section>
<div class="quote">
<div class="quote-left">
<blockquote>
L'air pur me Manque, le bruit des gens autour m'angoisse<br />
La ville s'immisce peu à peu dans ce corps maigre qu'est le mien<br />
Obstruant ainsi mes rêveries joyeuses d'un idéal qui s'éteint.
</blockquote>
</div>
<div class="quote-right">
<div class="author-details">
<div class="track-title">L'échappée</div>
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<div class="play"><i class="fa fa-play-circle-o fa-3x"></i></div>
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
<div class="quote-right-768">
<div class="author-details">
<div class="track-title-link">L'échappée</div>
<div class="artist-album">
<span>Les Discrets</span><br />
Septembre et ses dernières Pensées
</div>
</div>
</div>
</div>
<div class="content">
<header>Kontakt</header>
<article>
<p>W przyszłości pojawi się tutaj formularz kontaktowy. Póki co zachęcam do bezpośredniego kontaktu poprzez mój adres e-mail.
</p>
</article>
</div>
</section>
<div class="clear"></div>
<footer>
Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
</footer>
</div>
</body>
</html>