调整大小时浮动div

时间:2015-11-12 13:55:52

标签: html css resize width media-queries

我试过找到解决问题的办法,但无济于事。

我有一个使用媒体查询创建的网站。在这个项目中,除了纯HTML和CSS之外我不能使用其他任何东西,这就是为什么为了保持设计清洁,我在某些宽度上隐藏了一些div(我指的是&#; 39;例如,在右上角播放'按钮。

重现问题:

  1. 调整窗口大小,以便播放'按钮消失。
  2. 回到初始宽度。
  3. 不幸的是,问题是随机发生的,有时候一切都很完美,有时候每次都会发生。我已经能够使用在OS X Yosemite 10.11.1上运行的Safari 9.0.1和Google Chrome 46.0.2490.86来重现它。

    请找到解释以下问题的图片:

    How it's supposed to look

    How it looks upon resizing back

    提前感谢您的帮助!

    代码:

    
    
    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">
    						<a href="https://www.facebook.com/manoftheoak" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
    						<a href="http://www.last.fm/user/man_of_the_oak" target="_blank"><i class="fa fa-lastfm fa-2x"></i></a>
    						<a href="http://soundcloud.com/jakub-jas" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
    					</div>
    				</div>
    				
    				<nav>
    					<header>Menu</header>
    					<div class="nav-content">
    						<ul>
    							<li><a href="index.html"><i class="fa fa-home"></i>Strona główna</a></li>
    							<li><a href="muzyka.html"><i class="fa fa-music"></i>Muzyka</a></li>
    							<li><a href="fotografia.html"><i class="fa fa-camera-retro"></i>Fotografia</a></li>
    							<li><a href="grafika.html"><i class="fa fa-desktop"></i>Grafika</a></li>
    							<li><a href="kontakt.html"><i class="fa fa-envelope"></i>Kontakt</a></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"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>
    							<div class="play"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank"><i class="fa fa-play-circle-o fa-3x"></i></a></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"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></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 <a href="mailto:manoftheoak@gmail.com">adres e-mail</a>.
    						</p>
    					</article>
    				</div>
    			</section>
    			
    			<div class="clear"></div>
    			
    			<footer>
    				Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
    			</footer>
    		</div>
    
    	</body>
    </html>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:0)

只需移动你的游戏&#34; div inside&#34; artist-album&#34;

&#13;
&#13;
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;
	}
}
&#13;
<!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">
						<a href="https://www.facebook.com/manoftheoak" target="_blank"><i class="fa fa-facebook-official fa-2x"></i></a>
						<a href="http://www.last.fm/user/man_of_the_oak" target="_blank"><i class="fa fa-lastfm fa-2x"></i></a>
						<a href="http://soundcloud.com/jakub-jas" target="_blank"><i class="fa fa-soundcloud fa-2x"></i></a>
					</div>
				</div>
				
				<nav>
					<header>Menu</header>
					<div class="nav-content">
						<ul>
							<li><a href="index.html"><i class="fa fa-home"></i>Strona główna</a></li>
							<li><a href="muzyka.html"><i class="fa fa-music"></i>Muzyka</a></li>
							<li><a href="fotografia.html"><i class="fa fa-camera-retro"></i>Fotografia</a></li>
							<li><a href="grafika.html"><i class="fa fa-desktop"></i>Grafika</a></li>
							<li><a href="kontakt.html"><i class="fa fa-envelope"></i>Kontakt</a></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"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></div>    							
							<div class="artist-album">
<div class="play"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank"><i class="fa fa-play-circle-o fa-3x"></i></a></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"><a href="https://youtu.be/1ej7UkjdHNg" target="_blank">L'échappée</a></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 <a href="mailto:manoftheoak@gmail.com">adres e-mail</a>.
						</p>
					</article>
				</div>
			</section>
			
			<div class="clear"></div>
			
			<footer>
				Copyright © 2015 Jakub Jas. <br />Wszystkie prawa zastrzeżone.
			</footer>
		</div>

	</body>
</html>
&#13;
&#13;
&#13;