Home > database >  How to align these items on top of each other?
How to align these items on top of each other?

Time：01-27

I am making a website about Super Smash Bros as a personal project, but I am having an issue. I cannot figure out how to get the videos aligned on top of each other when in mobile view.

I tried display flex but that doesn't seem to be working, the idea was to have them inline when in desktop but when switched to mobile they would change. What do I need to learn?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SmashBrosGuide</title>
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="stylesheet" href="./styles/mobilenav.css">
    <link rel="icon" type="image/x-icon" href="./assets/images/smashbrostabicon.png">
    <script src="./js/main.js" defer></script>
    <script src="https://kit.fontawesome.com/64ae5ea867.js" crossorigin="anonymous"></script>
    <!--Mobile Nav-->
        <input type="checkbox" name="" id="" >
        <ul >
          <li><a href="./index.html" target="_blank">Home</a></li>
          <li><a href="./characters.html" target="_blank">Characters</a></li>
          <li><a href="https://google.com" target="_blank">Stages</a></li>
          <li><a href="https://google.com" target="_blank">Gamemodes</a></li>
        </ul>
        <div >
          <span ></span>
          <span ></span>
          <span ></span>
        </div>
<!--End of Mobile Nav-->
</head>

<body>
    <!--Back to top button-->
    <button
    type="button"  id="btn-back-to-top">
<i ></i>
</button>
<!--End of Back to top button-->

<!--Hero-->
<div >
    <!--Nav Bar-->
    <div >
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>
    <div >
        <div >
            <a href="./index.html"><div ><img src="./assets/images/homeicon.png" alt="home" ></div></a>
            <a href="./characters.html"><div ><img src="./assets/images/characters.png" alt="characters" ></div></a>
            <a href="#"><div ><img src="./assets/images/stage.png" alt="stages" ></div></a>
            <a href="#"><div ><img src="./assets/images/gamemodes.png" alt="gamemodes" ></div></a>
        </div>
    </div>
    <!--End of Nav-->

    <!--Logo-->
    <div >
        <div >
            <img src="./assets/images/smashlogo.png" >
        </div>
    </div>
</div>
<!--End of Hero-->

<!--Body-->
<div >
        <div >
            <div >
                <label  for="checkbox">
             <input type="checkbox" id="checkbox" />
             <div ></div>
           </label>
             <h1>Light or Dark Mode</h1>
           </div>

           <div >
            <div >
                    <h1 >World Of Light:</h1>
                    <div >
                        <iframe width="50em" height="30em" src="https://www.youtube.com/embed/WShCN-AYHqA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </div>
            </div>

            <div >
                <h1 >Newest Character:</h1>
                <div >
                    <iframe width="50em" height="30em" src="https://www.youtube.com/embed/82Q2XTJ8jWk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
            </div>

            <div >
                <h1 >Most Popular Video:</h1>
                <div >
                    <iframe width="50em" height="30em" src="https://www.youtube.com/embed/dKR_w6C5A5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            </div>
            </div>
        </div>

    </div>
</div>
<!--End Of Body-->

<!--Footer-->
<footer>
<div >

    <div >
        <h2 >Navigate</h2>
        <ul>
            <li><a href="./index.html">Home</a></li>
            <li><a href="./characters.html">Characters</a></li>
            <li><a href="#">Stages</a></li>
            <li><a href="#">Gamemodes</a></li>
        </ul>
    </div>

    <div >
        <h2 >Useful Links</h2>
        <ul>
            <li><a href="https://en.wikipedia.org/wiki/Super_Smash_Bros." target=”_blank>What is SSBU</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
    </div>

    <div >
        <h2 >Other</h2>
        <ul>
            <li><a href="#">Sitemap</a></li>
            <li><a href="#">Info</a></li>
            <li><a href="#">What is this site about</a></li>
        </ul>
    </div>

    <div >
        <h2 >Search</h2>
            <form><input type="Search" id="fname" name="fname"  placeholder="Search"></form>
    </div>

</div>
</footer>
<!--End of footer -->
</body>
</html>


* {  
  padding: 0;
  margin: 0;
  font-family: Geonik;
  
}

@font-face {
    font-family: Geonik;
    src: url(../assets/fonts/ckhans-fonts-geonik-pro-regular-demo.otf);
  }

@font-face {
  font-family: Nexa;
  src: url(../assets/fonts/NexaText-Trial-Regular.ttf);
}

body {
    background-color: rgb(58, 58, 57);
}

html {
    scroll-behavior: smooth;
}

/*Back To Top*/
#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 30px;
    display: none;
    height: 5em;
    width: 5em;
    border-radius: 5em;
    border: 0.3em solid white;
    background-color: rgb(19, 20, 41);
    color: white;
    -webkit-text-stroke-color: black;
    z-index: 2;
    transition: all .2s ease-in-out;
  }

  #btn-back-to-top:hover {
    transform: scale(1.1);
  }
/*Hero*/
.herocontainer {
    background-position: center;
    width: 100%;
    height: 100vh;
    background-size: cover !important;
    background-repeat: no-repeat;
}
.flex-center {
    height: 87.5vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.smashlogoimage {
    width: 100%;
    transition: all .2s ease-in-out;
}

.smashlogoimage:hover {
    transform: scale(1.1);
}

.smashlogo {
    width: 25em;
    padding: 0 20% 0 20%;
}

/*Navbar*/
.navcontainer {
    height: 12.5vh;
    display: flex;
    min-height: 12.5vh;
    max-height: 12.5vh;
}

.navbar {      
    height: 100%;
    width: 40%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 10%;
    margin-top: 2%;
}

.navitem {
    background-image: url('../assets/images/box.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 6vw;
    width: 6vw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .2s ease-in-out;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.384);
}

.navitem:hover {
    transform: scale(1.1);
    filter: grayscale(1);
}

/*Individual Icons*/
.homeicon {
    width: 50%;
    height: 48%;
}

.charactersicon {
    width: 32%;
    height: 51%;
}

.stageicon{
    width: 54%;
    height: 52%;
}

.gamemodesicon {
    width: 48%;
    height: 50%;
}

/*Background*/
.crossfade > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: -1;
  }

  .crossfade > figure:nth-child(1) { background-image: url('../assets/background/pokemonbackground.png'); }
  .crossfade > figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('../assets/background/charizardbackground.png');
  }
  .crossfade > figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('../assets/background/snakebackground.png');
  }
  .crossfade > figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('../assets/background/terrybackground.png');
  }
  .crossfade > figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('../assets/background/bayonettabackground.png');
  }

  /*Body*/
.body {
    height: 100vh;
}

.content {
height: 100vh;
/* border: 2px dotted red; */
}

.info {
width: 30%;
/* border: 2px dotted red; */
height: 65%;
background-color: beige ;
border-radius: 2em;
margin-top: 5em;
}

.iframe-1 {
  /* border: 2px dotted red; */
  height: 100%;
  width: 103%;
}

iframe {
  height: 100%;
  width: 100%;
  border-radius: 2em;
}

.header {
  color: black;
  text-align: center;
  font-family: Nexa;
  font-size: 1.6em;

}

.main {
  /* border: 2px dotted red; */
  display: flex;
  height: 50vh;
  gap: 2.5em;
  justify-content: center;
}

    /*Footer*/
li {
    transition: all .2s ease-in-out;
    width: 0em;
}

li:hover {
    transform: scale(1.1);  
}

input[type=Search] {
    height: 4em;   
}
.footer--flex-container {
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    background:rgba(0, 0, 0, 0.384);
    color: white;
    padding-top: 0.75em;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
}

.footer--flex-item {
    margin-left: 3em;
}

.footer--headline1 {
    color: #F31E2C;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.65em;
}

.footer--headline2 {
    color: #18cf54;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.65em;
}

.footer--headline3 {
    color: #e59815;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.65em;
}

.footer--headline4 {
    color: #2883ec;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 1.65em;
}

.flex-footer > ul > li:nth-child(n 1):nth-last-child(n 4) {
    background-color: white;
}

.footer--flex-item {
    flex:1;
}

.footer--flex-item * {
    list-style: none;
    min-width: 10rem;
}

.footer--flex-item > ul > li {
    padding-bottom: 0.9em;
}

.footer--flex-item a {
    color: white;
    text-decoration: none;
}

.footer--flex-item a:hover {
    color: white;
}

/*Animations*/
  @keyframes 
imageAnimation {  0% {
 animation-timing-function: ease-in;
 opacity: 0;
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
}
 17% {
 opacity: 1
}
 25% {
 opacity: 0
}
 100% {
 opacity: 0
}
}

/* Media  */
@media only screen and (max-width: 820px) {
    .navbar {
        display: none;
    }

    .herocontainer {
        background-position: right;
        background-image: url('../assets/background/mobilebackground.webp');
        width: 100%;
        height: 100vh;
        background-size: cover !important;
        background-repeat: no-repeat;
    }

    #btn-back-to-top {
        position: fixed;
        bottom: 20px;
        right: 30px;
        display: none;
        height: 3em;
        width: 3em;
        border-radius: 5em;
        border: 0.3em solid rgb(255, 255, 255);
        background-color: rgb(19, 20, 41);
        color: white;
        -webkit-text-stroke-color: black;
        z-index: 2;
      }
      
      .crossfade > figure {
        display: none;
  }

  .crossfade > figure:nth-child(1) {         display: none;}
  .crossfade > figure:nth-child(2) {
    display: none;
  }
  .crossfade > figure:nth-child(3) {
    display: none;
  }
  .crossfade > figure:nth-child(4) {
    display: none;
  }
  .crossfade > figure:nth-child(5) {
    display: none;
  }

/*Body*/
  .body {
    height: 150vh;
}

.content {
height: 100vh;
/* border: 2px dotted red; */
}

.info {
width: 100%;
/* border: 2px dotted red; */
height: 20%;
background-color: beige ;
border-radius: 2em;
margin-top: 5em;
}

.iframe-1 {
  /* border: 2px dotted red; */
  height: 100%;
  width: 103%;
}

iframe {
  height: 100%;
  width: 100%;
  border-radius: 2em;
}

.header {
  color: black;
  text-align: center;
  font-family: Nexa;
  font-size: 1.6em;

}

.main {
  border: 2px dotted red;
  height: 100vh;
  gap: 2.5em;
  display: flex;
  align-items: baseline;
}
}

/*Scrollbar*/
::-webkit-scrollbar {
    width: 0.3em;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

  /*Light Dark*/
  @import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita One);
  
  :root {
     --primary-color: #302AE6;
     --secondary-color: #536390;
     --font-color: #424242;
     --bg-color: #fff;
     --heading-color: #292922;
 }
 
 [data-theme="dark"] {
     --primary-color: #9A97F3;
     --secondary-color: #818cab;
     --font-color: #e1e1ff;
     --bg-color: #161625;
     --heading-color: #818cab;
 }
 
 body {
   font-family: ;
   background-color: var(--bg-color);
   color: var(--font-color);
   max-width: 100%;
   margin: 0 auto;
   font-size: 1em;
   /* border: 2px dotted red; */
 }
 
 h1 {
     color: var(--heading-color);
     font-family: Geonik;
     font-size: 2rem;
     margin-bottom: 1vh;
 }
 
 p {
   font-size: 1.1rem;
   line-height: 1.6rem;
 }
 
 a {
   color: var(--primary-color);
   text-decoration: none;
   border-bottom: 3px solid transparent;
   font-weight: bold;
   &:hover, &:focus {
       border-bottom: 3px solid currentColor;
   }
 }
 
 /*slider switch css */
 .theme-switch-wrapper {
   display: flex;
   align-items: center;
   
   h1 {
     margin-left: 10px;
     font-size: 1rem;
   }
 }
 .theme-switch {
   display: inline-block;
   height: 34px;
   position: relative;
   width: 60px;
 }
 
 .theme-switch input {
   display:none;
 }
 
 .slider {
   background-color: #ccc;
   bottom: 0;
   cursor: pointer;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   transition: .4s;
 }
 
 .slider:before {
   background-color: #fff;
   bottom: 4px;
   content: "";
   height: 26px;
   left: 4px;
   position: absolute;
   transition: .4s;
   width: 26px;
 }
 
 input:checked   .slider {
   background-color: #66bb6a;
 }
 
 input:checked   .slider:before {
   transform: translateX(26px);
 }
 
 .slider.round {
   border-radius: 34px;
 }
 
 .slider.round:before {
   border-radius: 50%;
 }

CodePudding user response：

In media queries use this CSS,

@media screen and (min-width: 480px(or anything)) {
   .main{
     display: flex;
       align-items: center;
       justify-content:center;
       flex-direction: row;
    }
}

CodePudding user response：

@media only screen and (max-width: 820px) {
.navbar {
    flex-direction: column;
}

Is that what you were looking for ?

Page link：https//www.codepudding.com/database/684534.html

Prev:CSS selector for element before another element/remove list-style-type of nested uls
Next:HTML/CSS - Elements one under other and scroll not working
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding