Small screen layout trouble

[OBXKH]

please see

https://codepen.io/Pavel_NA/pen/vYvOGmE

please use dev tools or shrink the browser

you will see the order is janky

please help me out with te proper code

thank you!

 

[BigDady]

Didn't we do this before? Didn't we tell you to start with the small screen and work up? I thought we did. Or was that on a different website?

Anyway, how do you wnt the smaller size screen to look?

 

[OBXKH]

this is a new project



ok, its interesting...

on my iphone, the code is fine

on my desktop small browser the footer and dev tools the footer is in the middle of the last image, totaly out of place

oubvioulsy my goal is to have the code line up, top to bottom as i have coded... footer at the bottom

seriously, i appreciate your time and trouble here

MANY THANKS!!

 

[VBService]

Why not use grid as a template for the whole page, e.g..

[ on-line ]

<div class="main-container">
  <header>
    <nav>
      <!-- LOGO -->
      <div class="logo">LOGO</div>

      <!-- NAVIGATION MENU -->    
      <ul class="links">
        <li>
          <input type="checkbox" id="hamburger-toggle">
          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>

            <li class="services">
              <a href="#">Events</a>
              <!-- DROPDOWN MENU -->
              <ul class="dropdown">
                <li><a href="#">Dropdown 1 </a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a></li>
                <li><a href="#">Dropdown 4</a></li>
              </ul>
            </li>

            <li><a href="#">Articles</a></li>
            <li><a href="#">Updates</a></li>
          </ul>
        </li>
        <li>        
          <label for="hamburger-toggle" class="hamburger">&#9776;</label>
        </li>
      </ul>
    </nav>
  </header>
  <main>
    <nav>
      <img src="https://forallthetime.com/progress/IMAGES/20.jpg" alt="nature scene">
      <img src="https://forallthetime.com/progress/IMAGES/28.jpg" alt="nature scene">
      <img src="https://forallthetime.com/progress/IMAGES/v.jpg" alt="nature scene">
    </nav>

    <article>
      <section>
        <h2>Lorem ipsum1</h2>
        <p>Lorem1 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</p>
        <div class="button"><a href="#">Button1</a></div>
      </section>
      <section>
        <h2>Lorem2 ipsum dolor sit amet</h2>
        <p>Lorem2 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</p>
        <div class="button"><a href="#">Button2</a></div>
      </section>
      <section>
        <h2>Lorem3 ipsum dolor sit amet elit</h2>
        <p>Lorem3 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique. Lorem3 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</p>
        <div class="button"><a href="#">Button3</a></div>
      </section>
      <section>
        <h2>Lorem4 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non.</h2>
        <p>Lorem4 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique. Lorem3 ipsum dolor sit amet consectetur adipisicing elit. Saepe, non. Voluptas consequuntur nobis deleniti quibusdam! Sapiente cumque soluta odio tenetur libero eum officiis excepturi? Esse ut deserunt voluptas necessitatibus similique.</p>
        <div class="button"><a href="#">Button4</a></div>
      </section>
    </article>

    <aside>
      <h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe inventore
        perspiciatis eaque deleniti corrupti suscipit culpa ea eveniet alias ratione!
      </h2>
      <h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi sed obcaecati. Adipisci deleniti sunt
        temporibus maiores quidem minima!
      </h2>
    </aside>
  </main>
 
  <footer>
    <div class="address">
      PO Box 7531<br>
      Any Town USA<br>
      ZIP 1357
    </div>
    <div class="contact">
      <a href="tel:2525557531">252 555 7531</a><br>
      <a href="mailto:[email protected]">[email protected]</a>
    </div>
    <div class="icons">
      <a href="#"><img src="ICONS/black_(17).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(20).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(14).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(23).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(12).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(83).png" alt="media"></a>
      <a href="#"><img src="ICONS/black_(19).png" alt="media"></a>
    </div>
  </footer>
</div>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  background: #2c3e50;
  font-family: 'Times New Roman', Times, serif;
  overflow: hidden;
  overflow-y: auto;
}
a {
  text-decoration: none;
}
.button a {
  display: block;
  width: 100%;
  height: 100%;
  color: black;
  padding: 1rem 0;
  text-align: center;
}
.main-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 4rem auto auto;
  gap: .25rem;
  grid-template-areas:
    "header"
    "main"
    "footer";
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* --- HEADER --- */
header {
  grid-area: header;
  margin: 0;
  padding: 0;
  width: 100%;
}
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  background-color: rgb(106, 112, 196);
  color: white;
}
header nav .logo {
  font-size: 2rem;
}
header nav .links, .menu, .dropdown {
  list-style-type: none;
}
header nav input[type="checkbox"] {
  display: none;
}
header nav .links {
  display: flex;
}
header nav .links .hamburger {
  display: none;
  font-size: 1.5rem;
  user-select: none;
  cursor: pointer;
}
header nav .menu {
  display: flex;
  gap: 1em;
  font-size: 1.1rem;
}
header nav .menu a {
  display: block;
  width: 100%;
  height: 100%;
  color: white;
  padding: 5px 14px;
}
header nav .menu li {
  transition: 0.3s ease;
}
@media (any-hover: hover) {
  header nav .menu li:hover {
    background-color: #4c9e9e;
    border-radius: .5rem;
  }
}
header nav .services {
  position: relative;
}
header nav .dropdown {
  background-color: rgb(1, 139, 139);
  padding: 1em 0;
  position: absolute;
  display: none;
  border-radius: .5rem;
  top: 30px;
}
header nav .dropdown a {
  padding: 0;
}
header nav .dropdown li {
  padding: 0.5em 1em;
  width: 8em;
  text-align: center;
}
header nav .dropdown li + li {
  margin-top: .7rem;
}
@media (any-hover: hover) {
  header nav .dropdown li:hover {
    background-color: #4c9e9e;
  }
  header nav .services:hover .dropdown {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  header nav {
    isolation: isolate;
  }
  header nav .menu {
    display: none;
    position: absolute;
    top: 3rem;
    left: 0;
    width: calc(100% - 2rem);
    z-index: 9999;
    background-color: rgb(106, 112, 196);
    padding: 1rem;
    text-align: center;
  }
  header nav .links .hamburger {
    display: block;
  }  
  header nav input[type="checkbox"]:checked ~ .menu {
    display: block;
  }
  header nav .dropdown {
    top: 2rem;
    left: 50%;
  }
}

/* --- MAIN --- */
main {
  grid-area: main;
  display: flex;
  flex-direction: row;
  gap: .5rem;
  padding: .25rem;
}
main nav, article, aside {
  border-radius: .5rem;
  padding: 1rem;
}
main nav {
  flex: 1 1 20%;
  background: #95a5a6;
  padding: .5rem;
}
main nav img {
  border-radius: .5rem;
  margin-bottom: 2rem;
  width: 100%;
  height: auto;
}

main article {
  flex: 1 1 60%;
  background: #ecf0f1;
  font-family: inherit;
}
main article h2 {
  padding-bottom: 3rem;
}
main article section + section h2 {
  padding-top: 2rem;
}
main article .button {
  border: 5px solid black;
  margin: 2rem auto;
  width: 12rem;
  background-color: #e70c68;
  font-size: 1.1rem;
}

main aside {
  flex: 1 1 20%;
  background: #3498db;
  padding-top: 10rem;
  font-family: inherit;
}

@media screen and (max-width: 640px) {
  main {
    flex-direction: column;
  }
  main article {
    order: 1;
  }
  main nav {
    order: 2;
  }
  main aside {
    padding-top: 1rem;
    order: 3;
  }
}

/* --- FOOTER --- */
footer {
  grid-area: footer;
  background-color: rgb(143, 119, 187);
  margin: 0 .25rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  padding: 1rem;

  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "address contact"
    "icons icons";
}
footer .address {
  grid-area: address;
  text-align: center;
}
footer .contact {
  grid-area: contact;
  text-align: left;
}
footer .icons {
  grid-area: icons;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding-top: 1rem;
}

@media screen and (max-width: 420px) {
  footer {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr auto;
    grid-template-areas:
      "address"
      "contact"
      "icons";
  }
  footer div {
    margin: .5rem 0;
  }
}