Fixing about tiles on mobile

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>

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 {

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;
+				}
 			}
 		}
 	}