Home > Blockchain >  Can someone help me align these items on top of each other?
Can someone help me 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 can not 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. So if someone could please help me with that and explain how you did it so I can learn that would be appreciated. (There is going to be a lot of code)

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/Blockchain/684003.html

Prev:Aligning two buttons in different forms in one line
Next:Align Crossmark with text in CSS
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding