feat: Improve responsive design for larger screens

Adjust the media query breakpoint to 991px to enhance the responsive layout for devices with larger screens. Added specific styling for `p.text-center.special-header` to increase the font size for improved readability. Optimized CSS to ensure primary buttons and navigation elements adapt more smoothly across a wider range of device widths. These adjustments make the UI more flexible and visually accessible, addressing user feedback on readability and interaction with key UI elements on tablets and smaller laptop screens.
This commit is contained in:
Kumi 2024-06-08 09:17:13 +02:00
parent abb6c8def0
commit 5f1de8b4f0
Signed by: kumi
GPG key ID: ECBCC9082395383F

View file

@ -132,7 +132,11 @@ h5 {
} }
/* Responsive Styles */ /* Responsive Styles */
@media (max-width: 768px) { @media (max-width: 991px) {
p.text-center.special-header {
font-size: 3rem;
}
.navbar .container { .navbar .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -173,6 +177,11 @@ h5 {
padding: 0 1rem; padding: 0 1rem;
} }
.navbar-btn {
margin: 0 auto !important;
}
@media (max-width: 768px) {
.btn.btn-primary { .btn.btn-primary {
margin: 1rem auto; margin: 1rem auto;
display: block; display: block;
@ -187,10 +196,6 @@ h5 {
font-size: 2rem; font-size: 2rem;
} }
.navbar-btn {
margin: 0 auto !important;
}
.that-br { .that-br {
display: none; display: none;
} }
@ -198,4 +203,5 @@ h5 {
.slogan { .slogan {
display: none; display: none;
} }
}
} }