CODEWITHSUNDEEP
htmlcssflexbox
Zecele
Zecele

Reputation: 81

Why is "flex-direction: row" not working for these images?

I can't figure out why the images are stuck in a column, I am trying to use flex-row + wrap so they display essentially 8 squares but nothing I've tried seems to fix the issue, i've included an image below of what it should look like, hopefully that helps.

any help is appreciated.

what it should look like

function openNav() {
    document.getElementById("mySidenav").style.width = "500px";
    document.getElementById("buttoncontain").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("buttoncontain").style.marginLeft = "0";
} 
body{
    
margin:0;
width:auto;
height:auto;
    
}

#container {
display: flex;
width:100vw;
    
}

.right {
flex-direction:row;
flex-wrap: row wrap;
position: relative;
width:auto;
margin-left:5%;
    
}

.img1{
    
width:auto;
height:18em;

    
}

h1{
    
margin-top:0.5em;
font-size:1.5em;
font-family: 'Karla', sans-serif;  
font-weight:200;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: white;
    overflow-x: hidden;
    padding-top: 60px; 
    transition: 0.5s; 
}

#buttonnav{
    
background-color: white; 
height:100vh;
width:3vw;
padding:10px;
margin:0;
box-shadow: 4px 0px rgba(0, 0, 0, 0.1);
position:relative;    
}

.svg1{
        
margin:15px;
cursor: pointer;

}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: black;
    display: block;
    transition: 0.3s;
    font-family: 'Karla', sans-serif;
}

/* Navigation Hover */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Close Button */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* smaller screens, less than 450px */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"> 
    <meta charset="UTF-8">
    <title>BeyondBelfastResearch</title>
</head>

<body>
 
 <div id="container">

 <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">Overview</a>
  <a href="#">Research</a>
  <a href="#">Prototyping</a>
  <a href="#">Illustrations</a>
  <a href="#">Sketches</a>
  <a href="#">Essay</a>
  <a href="#">Final Design</a>
  <a href="#">Extra</a>
</div>
   
<div id="buttonnav">
    <span class="span1" onclick="openNav()">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 77.5" class="svg1"> <rect width="128" height="13.7" class="svg1"/> <rect y="63.8" width="128" height="13.7" class="undefined"/> </svg>
    </span> 
</div>

<div class="right">
   
   <img alt="image1" class="img1" src="img/test1.jpg"><h1>Overview</h1>
   
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Research</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Prototyping</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Illustrations</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Sketches</h1>
   
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Essay</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Final Design</h1>
    
    <img alt="image1" class="img1" src="img/test1.jpg"><h1>Extra</h1>
    
    </div>
</div>

</body>

<script src="js/sidebar.js"></script>

</html>

Upvotes: 2

Views: 5037

Answers (1)

benvc
benvc

Reputation: 15120

You need to make the container a flexbox for those flex properties to take effect. Add display: flex to the css for your .right div.

Upvotes: 3

Related Questions