diff --git a/static/css/main.css b/static/css/main.css index 27d2135..b34d38a 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -108,6 +108,7 @@ header { display: flex; list-style: none; gap: 2rem; + margin-left: 0; } .main-nav a { @@ -125,14 +126,25 @@ header { @media (max-width: 768px) { .header-content { flex-direction: column; + align-items: center; + text-align: center; } .logo { margin-bottom: 1rem; + max-width: 180px; + } + + .main-nav { + width: 100%; } .main-nav ul { gap: 1rem; + display: flex; + justify-content: center; + padding-left: 0; + width: 100%; } } @@ -391,6 +403,8 @@ footer { .footer-nav ul { list-style: none; + margin-left: 0; + padding-left: 0; } .footer-nav li { @@ -427,6 +441,35 @@ footer { border-top: 1px solid rgba(255, 255, 255, 0.1); } +@media (max-width: 768px) { + footer { + padding: 2rem 0 1rem; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 1.5rem; + text-align: center; + } + + .footer-logo, .footer-nav, .footer-contact { + display: flex; + flex-direction: column; + align-items: center; + } + + .footer-logo-img { + max-width: 120px; + margin-bottom: 1rem; + } + + .footer-nav ul { + display: flex; + flex-direction: column; + align-items: center; + } +} + /* Team Section */ .section-intro { text-align: center; @@ -627,11 +670,14 @@ footer { /* Media Queries */ @media (max-width: 768px) { h1 { - font-size: 2.5rem; + font-size: 1.8rem; + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; } h2 { - font-size: 2rem; + font-size: 1.8rem; } .hero { @@ -639,6 +685,21 @@ footer { padding: 2rem 0; } + .container { + padding: 0 1rem; + } + + .hero h1 { + max-width: 100%; + } + + .main-nav ul { + gap: 1rem; + justify-content: center; + padding-left: 0; + margin-left: 0; + } + .card { width: 100%; max-width: 300px;