diff --git a/Alien.css b/Alien.css index 100b002..e8a4504 100644 --- a/Alien.css +++ b/Alien.css @@ -559,6 +559,12 @@ body.dark-theme .footer-links a:hover { flex-direction: column; gap: 10px; } + .navbar{ + gap: 10px; + padding: 20px 0px; + justify-content: center; + align-items: start; + } } /* Responsive Breakpoints */ @@ -609,6 +615,7 @@ body.dark-theme #gameInfo { /* Instructions */ #instructions { margin-top: 30px; + padding: 1rem; } #instructionsTitle { @@ -670,7 +677,7 @@ body.dark-theme #instructionsTitle { } .controls { - margin-right: 45%; + margin-right: 35%; display: flex; justify-content: center; align-items: center; @@ -739,7 +746,7 @@ body.dark-theme #instructionsTitle { } .navbar { flex-direction: column; - padding: 20px; + padding: 20px 0; } .navbar a { @@ -753,6 +760,11 @@ body.dark-theme #instructionsTitle { width: auto; } + .logoImage{ + height: 65px; + margin-left: 25px; + } + .navbar .faq-btn { font-size: 0.6em; padding: 5px 8px; @@ -781,3 +793,33 @@ body.dark-theme #instructionsTitle { padding-left: 0; } } +@media (min-width: 768px) and (max-width: 1024px){ + .navbar{ + justify-content: flex-start; + flex-wrap: nowrap; + gap: 5px; + + } + .navbar a{ + padding: 0; + } + .slider{ + visibility: hidden; + } + #gameControls.header { + flex-direction: column; + width: 50%; + } + #gameControls{ + margin-left: 10px; + } + .sidebar{ + height: auto; + } + #gameCanvas{ + width: 100%; + } + #startButton{ + transform: translate(0px, 0px); + } +} \ No newline at end of file diff --git a/Contributors/contributor.css b/Contributors/contributor.css index 0a088d8..f2506f5 100644 --- a/Contributors/contributor.css +++ b/Contributors/contributor.css @@ -553,4 +553,16 @@ a{ transform: scale(1.02); background-color: #fff; color: black; +} +@media (max-width : 768px) { + .contributor-stats h2{ + font-size: 2rem; + } + .title{ + font-size: 2rem; + } + .contributor-card{ + max-width: calc(80% - 16px); + width: 100%; + } } \ No newline at end of file diff --git a/FAQs.css b/FAQs.css index 5ee5ac6..95b1da9 100644 --- a/FAQs.css +++ b/FAQs.css @@ -197,3 +197,14 @@ ul li:hover { color: #f72585; transition: color 0.3s ease; } +@media (max-width:768px) { + h1{ + margin-top: 5rem; + } + h2{ + font-size: 1.3em; + } + .title{ + font-size: 1.5em; + } +} \ No newline at end of file diff --git a/donation_page.html b/donation_page.html index 4e4de3d..d7d35ef 100644 --- a/donation_page.html +++ b/donation_page.html @@ -190,6 +190,11 @@ gap: 2rem; margin: 2rem 0; } + @media (max-width:786px) { +.donation-stats{ + flex-direction: column; +} + } .stat-card { background: rgba(255, 255, 255, 0.1); diff --git a/index.html b/index.html index 5fac4d3..63d0826 100644 --- a/index.html +++ b/index.html @@ -370,13 +370,18 @@ /* 4:3 aspect ratio */ } } + @media (max-width: 768px){ + .logoImage{ + height: 65px; + } + } /* Small screens (up to 480px) */ @media (max-width: 480px) { #gameCanvas { height: 240px; /* 4:3 aspect ratio */ - width: 320px; + width: 100%; /* 4:3 aspect ratio */ } } @@ -385,7 +390,6 @@ height: 80px; /* Adjust to fit the header */ width: auto; - margin-right: 15px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s, filter 0.3s; } @@ -652,9 +656,9 @@

What power-up do you find most helpful?

- +
- +
@@ -674,6 +678,12 @@

What power-up do you find most helpful?

+ + +
+ + +