1 reply [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 weeks 5 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

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>

Emma
Emma's picture
Offline
Enthusiast
Last seen: 2 weeks 5 days ago
Timezone: GMT+1
Joined: 2005-04-19
Posts: 150
Points: 37

Fixed this myself

Fixed this myself eventually..although it validated there was one div in the wrong place. Once it was moved down the items displayed horizontally as required Smile