Jump to content

W3 css : combine responsive and vertically aligned cells


Johan
 Share

Recommended Posts

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...