Jump to content
Johan

W3 css : combine responsive and vertically aligned cells

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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...