2 replies [Last post]
Emma
Emma's picture
Offline
Enthusiast
Last seen: 1 year 31 weeks 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: 1 year 31 weeks 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

Andrey Petrush
Offline
newbie
Last seen: 10 weeks 4 days ago
Timezone: GMT+3
Joined: 2022-09-14
Posts: 1
Points: 1

Exposit