PrivateCoffee/privatecoffee-website
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Improve responsive design for larger screens

Browse source 
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
1 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
assets/css/base.css
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;
} }
@ -199,3 +204,4 @@ h5 {
display: none; display: none;
} }
} }
}