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

Issue

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

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}
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: row;
  color: black;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.info li {
  display: flex;
  flex-direction: row;
  margin-right: 200px;
  margin-left: 200px;
}
<!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>
    <ul class="info">
      <li>Diameter</li>
      <li>18mm</li>
    </ul>
  </div>
</body>

</html>

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>

Answered By – AStombaugh

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.