W3 css : combine responsive and vertically aligned cells

Johan · May 1, 2020

I've been struggling with W3 CSS for 2 days now, but struggling means learning so that's okay.
I'm trying to rebuild this page to make it responsive : https://hdauctions.com/wp-content/uploads/2011/11/Autobahn.html

I'm struggling when combining grid, responsive and layout classes but i'm please with the responsiveness of following code.
But taking care of the height of the two responsive blocks is not working. According to layout "Side-by-side w3-cell elements will also automatically self-adjust to equal height"

Any suggestions ? Did I do well for a non css'er ?

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-row w3-border" >
<div class="w3-col m6 l4 w3-container w3-white w3-cell w3-mobile mylogo w3-border w3-cell-middle" >
<p>Healey Chevrolet Buick</p>
</div>
<div class="w3-rest w3-container w3-cell menutext w3-border w3-black w3-round-xxlarge">
<div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle">
<p>Odometer: 50,000</p>
</div>
<div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle">
<p>engine: 6.2L V8</p>
</div>
<div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle">
<p>transmission: Automatic</p>
</div>
<div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle">
<p>color: Ceramic Matrix Gray Metallic</p>
</div>
<div class="w3-container w3-black w3-cell w3-mobile w3-cell-middle">
<p>interior: Jet Black Leather</p>
</div>
</div>
</div>
</body>
<style>
.blueline {color:#fff !important;background-color:#0099FF ; height:14px!important}
.mylogo {
   font-family: 'Lobster', 'Ubuntu Condensed', sans-serif;
   font-size: 24px;
   color: #000;
   text-shadow: 1px 1px 1px #444;
   }
.menutext {
   font-family: 'Oswald', 'Ubuntu Condensed', sans-serif;
   font-size: 11px;
   color: #FFF;
   text-transform: uppercase;
   letter-spacing: -0.05px;
}
</style>
</html>

Sign In

W3 css : combine responsive and vertically aligned cells

Recommended Posts

Johan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity