Skip to content

Commit a349097

Browse files
committed
Apply styling fix to about page to make it more responsive
1 parent 47e5974 commit a349097

File tree

1 file changed

+13
-2
lines changed

1 file changed

+13
-2
lines changed

src/pages/about.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,23 @@ import Layout from '../layouts';
33
import me from '../images/me.jpg';
44
import banner from '../images/about-me-banner.jpg';
55
import { OutboundLink } from 'gatsby-plugin-google-analytics';
6+
import styled from 'styled-components';
7+
8+
const AboutMeHeader = styled.div`
9+
float: left;
10+
margin-right: 3em;
11+
margin-bottom: 0.5em;
12+
13+
@media (max-width: 600px) {
14+
float: none;
15+
}
16+
`;
617

718
export default function About() {
819
return (
920
<Layout>
1021
<img src={banner} alt="Me standing on stage giving a talk" />
11-
<div style={{ float: 'left', marginRight: '3em', marginBottom: '1em' }}>
22+
<AboutMeHeader>
1223
<div>
1324
<img
1425
src={me}
@@ -60,7 +71,7 @@ export default function About() {
6071
</li>
6172
</ul>
6273
</div>
63-
</div>
74+
</AboutMeHeader>
6475

6576
<section>
6677
<div

0 commit comments

Comments
 (0)