From e149afd79ab95d4214a3211e87b7dccd020a80cc Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 8 Feb 2017 21:13:20 +1300
Subject: [PATCH] Fixing about tiles on mobile

---
 src/js/views/Artist.js           |  6 +++---
 src/scss/components/_images.scss | 15 ++++++++++++---
 src/scss/views/_artist.scss      | 17 +++++++++++++++++
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 7e7ac218..fd4ee919 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -141,9 +141,9 @@ class Artist extends React.Component{
 					</div>
 
 					<div className="col w60 biography">
-						<h4 className="left-padding">Biography</h4>
-						<section className="text-wrapper no-top-padding">
-							{ this.props.artist.bio ? <div><p>{this.props.artist.bio.content}</p><br />
+						<h4>Biography</h4>
+						<section>
+							{ this.props.artist.bio ? <div className="biography-text"><p>{this.props.artist.bio.content}</p><br />
 							<div className="grey-text">Published: { this.props.artist.bio.published }</div>
 							<div className="grey-text">Origin: <a href={ this.props.artist.bio.links.link.href } target="_blank">{ this.props.artist.bio.links.link.href }</a></div></div> : null }
 						</section>
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index 7e3544fc..7265f565 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -113,15 +113,24 @@
 			z-index: -2;
 		}
 
-		@include responsive( null, $bp_medium ){
+	}
+
+	@include responsive( null, $bp_medium ){
+		.tile {
 			@include grid_item( 2 );
 		}
+	}
 
-		@include responsive( $bp_medium ){
+	@include responsive( $bp_medium ){
+		padding-bottom: 20px;
+		
+		.tile {
 			@include grid_item( 3 );
 		}
+	}
 
-		@include responsive( $bp_narrow ){
+	@include responsive( $bp_narrow ){
+		.tile {
 			.text {
 				font-size: 14px;
 				.fa {
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 01747dfe..8b7e96b1 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -69,10 +69,21 @@
 	.body.about {		
 		@include clearfix();
 		padding: 0 40px 40px 40px;
+
+		.biography {
+			padding-left: 40px;
+			box-sizing: border-box;
+
+			.biography-text {
+				overflow-wrap: break-word;
+			}			
+		}
 	}
 
 	@include responsive( $bp_medium ){
 		.intro {
+			margin-bottom: 20px;
+
 			.liner {
 				text-align: center;
 				padding-left: 20px;
@@ -107,12 +118,18 @@
 			}
 
 			&.about {
+				padding: 0 20px 20px 20px;
+
 				.col.w40,
 				.col.w60 {
 					@include clearfix();
 					width: 100%;
 					float: none;
 				}
+				
+				.biography {
+					padding-left: 0;
+				}
 			}
 		}
 	}