From 7680fe03f762fc0fe9759a349d7921b6dfd95875 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Thu, 10 Mar 2022 20:58:24 +0900
Subject: [PATCH] prevent image overflowing on small displays

---
 markdown/portfolio/0.md        | 2 +-
 src/components/MainContent.tsx | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/markdown/portfolio/0.md b/markdown/portfolio/0.md
index b11d51b..c38c182 100644
--- a/markdown/portfolio/0.md
+++ b/markdown/portfolio/0.md
@@ -8,4 +8,4 @@ Currently studying computer science at [hongik university](https://wwwce.hongik.
 
 ## Skills
 
-<img alt="programming skills" src="/img/skills.svg" style="display: block; margin-left: auto; margin-right: auto; max-width: 100%;" />
+<img alt="programming skills" src="/img/skills.svg" />
diff --git a/src/components/MainContent.tsx b/src/components/MainContent.tsx
index b0f1385..3436f23 100644
--- a/src/components/MainContent.tsx
+++ b/src/components/MainContent.tsx
@@ -7,6 +7,14 @@ export const mainContentCSS = css`
 	margin-top: 1rem;
 	width: 50%;
 
+	img {
+		max-width: 100%;
+	}
+
+	table img {
+		max-width: fit-content;
+	}
+
 	@media screen and (max-width: ${theming.size.screen_size1}) {
 		width: auto;
 		margin: 1rem;