commit e7218248d7d652c94373ad0607d6f997d44ca646
parent af87f3dfc5164ea513b0c5b7f5a85b0796186a11
Author: Hunter
Date: Thu, 24 Jul 2025 21:26:44 -0400
club-mate: improve chrome layout
Diffstat:
1 file changed, 34 insertions(+), 7 deletions(-)
diff --git a/pages/club-mate/index.html b/pages/club-mate/index.html
@@ -63,19 +63,29 @@
font-family: serif;
align: left;
}
+ .header-container {
+ max-width: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 15px;
+ overflow: hidden;
+ }
+
.header-logo {
max-width: 400px;
- width: 100%;
- padding-left: 20px;
- padding-right: 20px;
+ width: 60%;
+ padding-left: 15px;
+ padding-right: 15px;
box-sizing: border-box;
+ flex-shrink: 1;
}
.header-bottle {
- max-width: 70px;
- width: 15%;
- min-width: 40px;
+ max-width: 60px;
+ width: 20%;
+ min-width: 30px;
filter: drop-shadow(3px 3px 4px black);
+ flex-shrink: 0;
}
.inline-bottle {
float: right;
@@ -106,6 +116,23 @@
margin-bottom: 50px;
}
@media (max-width: 600px) {
+ .header-container {
+ padding: 0 10px;
+ }
+
+ .header-bottle {
+ max-width: 45px;
+ width: 18%;
+ min-width: 25px;
+ }
+
+ .header-logo {
+ padding-left: 5px;
+ padding-right: 5px;
+ max-width: 250px;
+ width: 64%;
+ }
+
.gaucho-section {
flex-direction: column;
}
@@ -132,7 +159,7 @@
</head>
<body>
<div class="inner-div">
- <div class="centered" style="max-width:100%">
+ <div class="centered header-container">
<img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">
<img class="header-logo" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/hunters_club-mate_fan_club.svg">
<img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">