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 */