diff --git a/README.md b/README.md
index 1abed3a..7fb1c4e 100644
--- a/README.md
+++ b/README.md
@@ -15,5 +15,7 @@ Active backlog:
- Add images, code snippets, etc. to projects
- When the user scrolls past the bottom of the page, footer background color does not continue
- Animate #skills to fade in from bottom on scroll. Elements fade in individually from left to right
-- Mobile-responsive display
+- Mobile-responsive display - refactor with SASS?
+ - Continue from Partials heading here https://www.freecodecamp.org/news/the-beginners-guide-to-sass/
+ - But use @use not @import
- Change CSS selector for `
` to select the last div of that class type
\ No newline at end of file
diff --git a/webpage/style.css b/webpage/style.css
index 80bffee..a3a649d 100644
--- a/webpage/style.css
+++ b/webpage/style.css
@@ -28,7 +28,6 @@ a:visited {
color: gray;
}
-
/* HEADER */
#header {
position: relative;
@@ -324,11 +323,31 @@ footer p {
text-align: center;
}
+
+
+
+
/* TODO Restructure for mobile displays - screen width <= 480px
-- Skills columns combine into one
+- Skills columns center
- Left projects menu becomes dropdown, project content shows below
*/
@media (max-width: 480px) {
+ div.main {
+ width: 100%;
+ }
+
+ #skills {
+ margin: 0 auto;
+ }
+ #skills div {
+ width: 100%;
+ }
+ #skills #swe_skills {
+ margin: 0;
+ }
+ #skills #other_skills {
+ margin: 0;
+ }
}
/* ANIMATIONS */