Skip to content

Commit ae171d7

Browse files
committed
Improve responsive design of about page
1 parent 42d0602 commit ae171d7

File tree

1 file changed

+22
-9
lines changed

1 file changed

+22
-9
lines changed

src/pages/about.js

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,34 @@ const AboutMeHeader = styled.div`
1616
}
1717
`;
1818

19+
const Picture = styled.img`
20+
border-radius: 50%;
21+
width: 8em;
22+
min-width: 8em;
23+
height: 8em;
24+
25+
@media (max-width: 600px) {
26+
float: right;
27+
margin-left: 2em;
28+
}
29+
30+
@media (max-width: 500px) {
31+
float: right;
32+
}
33+
34+
@media (max-width: 475px) {
35+
display: block;
36+
float: none;
37+
}
38+
`;
39+
1940
export default function About() {
2041
return (
2142
<Layout>
2243
<img src={banner} alt="Me standing on stage giving a talk" />
2344
<AboutMeHeader>
2445
<div>
25-
<img
26-
src={me}
27-
style={{
28-
borderRadius: '50%',
29-
width: '10em',
30-
height: '10em',
31-
}}
32-
alt=""
33-
/>
46+
<Picture src={me} alt="" />
3447
</div>
3548

3649
<div>

0 commit comments

Comments
 (0)