diff --git a/README.md b/README.md index e938bba309..d8f87bf98c 100644 --- a/README.md +++ b/README.md @@ -83,7 +83,11 @@ cd developerFolio cp env.example .env # For Windows copy env.example .env +``` + +NOTE: You must configure environment variables before running your portfolio, as certain components rely on API data. Failure to do so will result in a 401 Unauthorized error. +```bash # Install dependencies npm install diff --git a/src/components/button/Button.scss b/src/components/button/Button.scss index e9058b69dd..ee501f05a9 100644 --- a/src/components/button/Button.scss +++ b/src/components/button/Button.scss @@ -38,10 +38,21 @@ font-size: 0.938rem; padding: 12px 18px; margin-right: 0px; + width: 100%; + margin: 10px auto; + } +} +@media (max-width: 480px) { + .main-button { + font-size: 0.875rem; + width: 90%; + padding: 10px 15px; } } @media (max-width: 320px) { .main-button { font-size: 0.75rem; + width: 95%; + padding: 8px 12px; } } diff --git a/src/containers/greeting/Greeting.scss b/src/containers/greeting/Greeting.scss index 647d792af9..08938e674d 100644 --- a/src/containers/greeting/Greeting.scss +++ b/src/containers/greeting/Greeting.scss @@ -40,6 +40,9 @@ } .download-link-button { text-decoration: none; + width: 100%; + display: flex; + justify-content: center; } .greeting-text { @@ -102,6 +105,8 @@ @media (max-width: 768px) { .button-greeting-div { justify-content: space-around; + flex-direction: column; + align-items: center; } .greeting-text { font-size: 30px;