How do I set "Audio" above "Diameter 18mm"

May 26, 2022

Here is my project
https://jsfiddle.net/9rkfst5a/1/
How can I get the h1 above the ul and not next to each other?

>Solution :

Many ways, but simple and quick would be to just knock them out of the flow in your HTML so they’re not contained in the specs class and then set the padding to 0 so the info isn’t inheriting it.

html {
  scroll-behavior: smooth;
  overflow-x: hidden
}

body {
  font-family: 'SamsungOne', sans-serif;
}

a {
  color: black;
  text-decoration: none;
}

.product {
  position: absolute;
  margin-top: 25px;
  display: flex;
  flex-direction: row;
  color: black;
}

.product ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  font: 50;
}

.product li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.product ul #product-naam {
  font-size: xx-large;
  margin-left: -10px;
}

#ScrollToTop {
  position: fixed;
  right: 25px;
  bottom: 55px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: black;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: white;
  outline: none;
  border: none;
  cursor: pointer;
  z-index: 1;
}

#ScrollToTop:hover {
  background: white;
  color: black;
}

.logo {
  position: relative;
  top: 20px;
  left: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menubalk {
  display: flex;
  flex-direction: row;
  color: black;
  align-items: center;
}

.menubalk li {
  display: flex;
  flex-direction: row;
  margin-right: 50px;
}

.name {
  position: absolute;
  margin-top: 100px;
}

.slideshow-container {
  max-width: 853px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.411);
}

.fade {
  animation-name: fade;
  animation-duration: 1s;
}

@keyframes fade {
  from {
    opacity: .7
  }
  to {
    opacity: 1
  }
}

.achtergrond {
  background-color: black;
  color: white;
  display: block;
  box-sizing: border-box;
}

.specs {
  position: relative;
  top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cat {
  margin-right: auto;
  margin-left: auto;
}

.info {
  display: flex;
  flex-direction: column;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

.info li {
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="Images/logo-square-letter.png">
  <link rel="stylesheet" href="buds-2.css" type="text/css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="http://fonts.cdnfonts.com/css/samsungone" rel="stylesheet">
  <title>Samsung Galaxy Buds 2</title>
</head>

<body>
  <button id="ScrollToTop">
      <i class="material-icons">arrow_upward</i>
    </button>
  <script>
    const ScrollToTop = document.querySelector("#ScrollToTop");

    ScrollToTop.addEventListener("click", function() {
      window.scrollTo(0, 0);
    });
  </script>
  <header>
    <div class="logo">
      <a href="index.html"><img src="Images/samsung-logo.png" alt="Samsung Logo" width="150"></a>
      <ul class="menubalk">
        <a href="mailto:thomas.lisabeth@sintjozefbrugge.be" target="_blank">
          <li>Contact</li>
        </a>
        <a href="index.html#assortiment">
          <li>Assortiment</li>
        </a>
      </ul>
    </div>
  </header>

  <div class="product">
    <ul>
      <li id="product-naam"><strong>Galaxy Buds 2</strong></li>
      <a href="#info">
        <li>test</li>
      </a>
    </ul>
  </div>

  <div class="slideshow-container">
    <div class="mySlides fade">
      <img src="Images/Buds2-1.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-2.jpg" width="853">
    </div>

    <div class="mySlides fade">
      <img src="Images/Buds2-3.jpg" width="853">
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>
  <br>
  <br>
  <div class="specs">
    <h1 class="cat">Audio</h1>
  </div>
  <ul class="info">
    <li>Diameter</li>
    <li>18mm</li>
  </ul>
</body>

</html>