Thu, 2021-04-08 14:07
I'm new to using Flexbox and grid and cannot find the code to get the three icons to display in a row. No matter what I add they stack on top of each other...please advise,
<!DOCTYPE html> <head> <title>Title</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } html, body{ height: 100%; overflow: auto; } body { background: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url("Background.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; } p, a, button{ font-family: "Lato", sans-serif; color: var(--light); text-decoration: none; } p, button, .logo { cursor: pointer; } main { height: 100%; display: grid; grid-template-columns: minmax(60px, 1fr) repeat(6, minmax(50px, 190px)) minmax(60px, 1fr); } header{ grid-column: 2 / span 6; } nav{ display: flex; align-items: center; height: 120px; } .info{ grid-column: 2 / span 4; background: coral; } .hero_font { color: var(--light); font-family: "Lato", sans-serif; font-weight: 700; font-size: 4.575rem; } .icons { display: flex; margin-top: 55px; background: #ccc; } .icon { flex-direction: row; display: flex; flex-wrap: nowrap; justify-content: center; background: #fff; justify-content: space-around; } .icon_info { margin: 0 80px 0 20px; } .icon_top { font-size: 1.0625rem; font-weight: 400; margin-bottom: 5px; } .icon_bottom { font-size: 1.5625rem; font-weight: 700; } </style> </head> <body> <main> <header> <nav> </nav> </header> <section class="info"> <h1 class="hero_font">Italian Fine Dining.</h1> <div class="icons"> <div class="icon"> <img src="images/pine.svg" alt="info"> <div class="icon_info"> <p class="icon_top">Mains</p> <p class="icon_bottom">Sides</p> </div> </div> </div> <div class="icon"> <img src="images/pine.svg" alt="info"> <div class="icon_info"> <p class="icon_top">Desserts</p> <p class="icon_bottom">Ice Cream</p> </div> </div> <div class="icon"> <img src="images/pine.svg" alt="info"> <div class="icon_info"> <p class="icon_top">Drinks</p> <p class="icon_bottom">Wine List</p> </div> </div> </section> </main> </body> </html> <code>
