Thread

Muhammad Soban

Website Developer

Jun 26, 2019

Why are my images vertically aligned instead of horizontally?

I am currently creating an eCommerce website and I am facing a problem. First of all I would like to describe some things for your ease. I have a header and a sidebar. And I am trying to add some content to the web page such as Featured Products, New Arrivals etc. and I wanted to add pictures but whenever I add a picture, it vertically stack's the picture. By my side; I think that the sidebar is causing the problem. Currently, I have the sidebar, header and the main body. I have created different pages for these. And I am just including them in my main page. So can someone please tell me how to fix this problem?

Any help will really be appreciated

Thanks

My code for the header:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Home - Diamond Collections</title>
        <script src="kit.fontawesome.com/1cde82a3ba.js"></script>
        <style>



            @import url('fonts.googleapis.com/css');

:root {
  --background: rgba(0, 214, 170, .85);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
    margin: 0;
    background: 
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.content {

}

/* navigation styles start here */

header {
  background: var(--background);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
}

/* changed this from the tutorial video to
   allow it to gain focus, making it tabbable */
.nav-toggle {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

.nav-toggle:focus ~ .nav-toggle-label {
  outline: 3px solid rgba(lightblue, .75);
}

.nav-toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  margin-left: 1em;
  height: 100%;
  display: flex;
  align-items: center;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  background: white;
  height: 2px;
  width: 2em;
  border-radius: 2px;
  position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  position: absolute;
}

.nav-toggle-label span::before {
  bottom: 7px;
}

.nav-toggle-label span::after {
  top: 7px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--background);
  width: 100%;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav {
  transform: scale(1,1);
}

.nav-toggle:checked ~ nav a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display: none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
    height: 76px
  }

  .logo {
    grid-column: 2 / 3;
    position: absolute;

    height: 200px;
    //transform: scale(2,2);

  }

  nav {
    // all: unset; /* this causes issues with Edge, since it's unsupported */

    position: relative;
    text-align: left;
    transition: none;
    transform: scale(1,1);
    background: none;
    top: initial;
    left: initial;
    /* end Edge support stuff */

    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: 1.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1,1);
  }
}






h1 {
     margin:0
}

.logo a {
     display: flex;
     justify-content: center;
}

.logo img {
    height: 74px;
    margin-top: 1.1px;
} 


        </style>
    </head>
    <body>
        <header>
  <h1 class="logo"><a href="#"><img src="Images/Logo5.JPG"></a></h1>
  <input type="checkbox" id="nav-toggle" class="nav-toggle">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  <label for="nav-toggle" class="nav-toggle-label">
    <span></span>
  </label>
</header>

This is sidebar(which I think is causing the problem of vertically stacking the images...):

<style>

    .sidenav {
  height: 100%;
  width: 160px;
  margin-top: 6.1%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.main {
  margin-left: 160px; /* Same as the width of the sidenav */
  font-size: 28px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

</style>

<div class="sidenav">
  <a href="#">New Arrivals</a>
  <a href="#">Featured</a>
  <a href="#">Clothes</a>
  <a href="#">Brands</a>
</div>

<?php
require_once 'Partials/header.php';
 ?>
 <br><br><br><br>
 <link rel="stylesheet" type="text/css" href="Styles/Style.css">

<div class="main_wrapper">
<?php
    require_once 'Partials/sidebar.php';
?>


  <!--The main body section start here-->
<div class="main">
    <!--Featured Products List Starts Here-->

    <h2 style="text-align: center;">Featured Products</h2>
  <div class="container">
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
      <img src="Images/Logo5.JPG">
      <br><button>Add to cart</button>
    </div>
<h2 style="text-align: center;">New Arrivals</h2>
    <div class="container 2">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Clothes</h2>
    <div class="container 3">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>
<h2 style="text-align: center;">Brands</h2>
    <div class="container 4">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
      <img src="Images/Logo5.JPG">
    </div>

  <style>
      .container {
        display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow: auto;
      justify-content: space-between;x
      }
      .container > img {
        display: block;
        margin-top: 5px;
      }

    </style>


  <!--Featured Products List Ends Here-->
</div>
<!--The main body section ends here-->

<!--Back To Top Coding Starts Here-->
<head>
<style>

    #back-to-top-btn{
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        font-size: 20px;
        width: 50px;
        height: 50px;
        background-color: #fff;
        color: #333;
        cursor: pointer;
        outline: none;
        border: 3px solid #333;
        border-radius: 50%;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
        transition-property: background-color, color;
    }

    #back-to-top-btn:hover, #back-to-top-btn:focus{
        background-color: #333;
        color: #fff;
    }

    /* Animations */
.btnEntrance {
  animation-duration: 0.5s;
  animation-fill-mode: both;
  animation-name: btnEntrance;
}
/* zoomIn */
/* @keyframes btnEntrance {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
} */

/* fadeInUp */
@keyframes btnEntrance {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.btnExit {
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-name: btnExit;
}
/* zoomOut */
/* @keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
} */

/* fadeOutDown */
@keyframes btnExit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

</style>
</head>
  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>

<script src="js/Back_To_Top.js"></script>
<!--Back To Top Coding Ends Here-->
</div>

</body>
</html>

#php #html5 #css3

Responses(1)

so where is your product images. When I look up your humangous css and html code above there are no image tags put anywhere. <img/> tag is an inline-block tag. Which means as long as it fits it will sit side by side. You may either put line breaks after each image, or need to use flex or some other css styles to align them in a different direction. Since you didn't provide any code showing how you are placing the images, I put down a sample below at least will give you the idea.


<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <style>
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 300px;
        border: 1px solid red;
        padding: 20px;
      }
      .container > img {
        display: block;
      }
      .container > img:not(:first-child) {
        margin-top: 5px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <img src="randomuser.me/api/portraits/women/46.jpg" />
      <img src="randomuser.me/api/portraits/women/90.jpg" />
      <img src="randomuser.me/api/portraits/women/77.jpg" />
      <img src="randomuser.me/api/portraits/women/38.jpg" />
    </div>
  </body>
</html>

codesandbox.io/s/exciting-blackburn-gdqvk

Search Hashnode

Why are my images vertically aligned instead of horizontally?

Responses(1)

Recent threads