git/web_workshop

club-mate: improve chrome layout

Hunter
Thursday, July 24th, 2025 at 9:26 PM

pages/club-mate/index.html
+34
-7

 63  				font-family: serif;
 64  				align: left;
 65  			}
 66 +			.header-container {
 67 +				max-width: 100%;
 68 +				width: 100%;
 69 +				box-sizing: border-box;
 70 +				padding: 0 15px;
 71 +				overflow: hidden;
 72 +			}
 73 +			
 74  			.header-logo {
 75  				max-width: 400px;
    -				width: 100%;
    -				padding-left: 20px;
    -				padding-right: 20px;
 76 +				width: 60%;
 77 +				padding-left: 15px;
 78 +				padding-right: 15px;
 79  				box-sizing: border-box;
 80 +				flex-shrink: 1;
 81  			}
 82  			
 83  			.header-bottle {
    -				max-width: 70px;
    -				width: 15%; 
    -				min-width: 40px;
 84 +				max-width: 60px;
 85 +				width: 20%; 
 86 +				min-width: 30px;
 87  				filter: drop-shadow(3px 3px 4px black);
 88 +				flex-shrink: 0;
 89  			}
 90  			.inline-bottle {
 91  				float: right;

116  				margin-bottom: 50px;
117  			}
118  			@media (max-width: 600px) {
119 +				.header-container {
120 +					padding: 0 10px;
121 +				}
122 +				
123 +				.header-bottle {
124 +					max-width: 45px;
125 +					width: 18%;
126 +					min-width: 25px;
127 +				}
128 +				
129 +				.header-logo {
130 +					padding-left: 5px;
131 +					padding-right: 5px;
132 +					max-width: 250px;
133 +					width: 64%;
134 +				}
135 +				
136  				.gaucho-section {
137  					flex-direction: column;
138  				}

159  	</head>
160  	<body>
161  		<div class="inner-div">
    -			<div class="centered" style="max-width:100%">
162 +			<div class="centered header-container">
163  				<img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">
164  				<img class="header-logo" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/hunters_club-mate_fan_club.svg">
165  				<img class="header-bottle" src="https://hunterirving.github.io/web_workshop/pages/club-mate/images/cm_bottle_photo.png">