Product Landing Page - Video Size

HTML-CSS
1

Hi all,

This challenge is complete but there is one thing within it that has been causing me some issues and I can’t figure it out.

I can’t seem to set a max width on the video, the code used makes it responsive but when I add a max width to the container and expand the screen it adds more and more padding from the video container pushing the pricing boxes lower and lower, when no max width is set this doesn’t happen, but I feel the video gets too big and would like to limit the size.

Will post code pen below also.

P.S. I know the colour scheme is not great but that can be changed this was more about the layout :grin:

Thanks,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="https://use.fontawesome.com/54afbcea12.js"></script>
    <title>World Class Drum Kits</title>
  </head>
  <body>

  <!-- Header with navbar -->

  <header id="header" class="header">
    <div class="logo">
      <img id="header-img" src="https://i.imgur.com/sEQhr8Wl.png" title="source: imgur.com" alt="A drum logo">
    </div>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav id="nav-bar" class="nav-bar">
      <ul>
        <li><a class="nav-link" href="#Features">Features</a></li>
        <li><a class="nav-link" href="#How_it_works">How it works</a></li>
        <li><a class="nav-link" href="#Pricing">Pricing</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
      <span></span>
    </label>
  </header>
  <div class="main-container">
    <main>

      <!-- Email entry with submit button -->

      <div class="form-div">
        <h2>World Class Drum Kits</h2>
        <form id="form" class="form" action="https://www.freecodecamp.com/email-submit" method="get">
          <div class="form-input-div">
            <input id="email" class="form-input" name="email" type="email" placeholder="Enter valid email" required>
          </div>
          <input id="submit" class="submit-button" type="submit">
        </form>
      </div>

      <!-- Features list with icons -->

      <section id="Features" class="features">
        <div class="feats-flex-container">
          <div class="icon">
            <i class="fa fa-globe"></i>
          </div>
          <div class="feat-desc">
            <h2>World Class</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mattis molestie a iaculis at erat. In nisl nisi scelerisque eu. </p>
          </div>
        </div>
        <div class="feats-flex-container">
          <div class="icon plane">
            <i class="fa fa-paper-plane"></i>
          </div>
          <div class="feat-desc">

            <h2>Super Fast Delivery</h2>
            <p>Diam donec adipiscing tristique risus nec feugiat in. At ultrices mi tempus imperdiet nulla malesuada pellentesque.</p>
          </div>
        </div>
        <div class="feats-flex-container">
          <div class="icon">
            <i class="fa fa-certificate"></i>
          </div>
          <div class="feat-desc">

            <h2> Premium Quality</h2>
            <p>Proin libero nunc consequat interdum varius sit amet mattis vulputate. Est sit amet facilisis magna etiam tempor orci eu lobortis. </p>
          </div>
        </div>
      </section>

      <!-- Embeded video -->

      <div class="vid-container" id="How_it_works">
        <section class="how-it-works">
          <iframe id="video" class="vid" src="https://www.youtube.com/embed/eWDmKCmDPBc"></iframe>
        </section>
      </div>

      <!-- grid boxes with pricing -->

      <div id="Pricing" class="pricing-container">
        <div class="pricing-grid">
          <div class="product">
            <div class="level">Amateur</div>
            <h2>£1000</h2>
            <ol>
              <li>lorem</li>
              <li>Lorem ipsum dolor</li>
              <li>dolor sit amet</li>
              <li>consectetur adipiscing</li>
            </ol>
            <button class="button">select</button>
          </div>
          <div class="product">
            <div class="level">Intermediate</div>
            <h2>£3000</h2>
            <ol>
              <li>lorem</li>
              <li>Lorem ipsum dolor</li>
              <li>dolor sit amet</li>
              <li>consectetur adipiscing</li>
            </ol>
            <button class="button">select</button>
          </div>
          <div class="product">
            <div class="level">Professional</div>
            <h2>£5000</h2>
            <ol>
              <li>lorem</li>
              <li>Lorem ipsum dolor</li>
              <li>dolor sit amet</li>
              <li>consectetur adipiscing</li>
            </ol>
            <button class="button">select</button>
          </div>
        </div>
      </div>
    </main>

    <!-- footer -->

    <footer>
      <ul class="footer-nav">
        <li><a href="https://www.freecodecamp.com">Privacy</a></li>
        <li><a href="https://www.freecodecamp.com">Terms</a></li>
        <li><a href="https://www.freecodecamp.com">About us</a></li>
      </ul>
      <p>Copyright 2022 (made for fCC project)</p>
    </footer>
  </div>
</body>
</html>


:root {
  --primary-color-400: #adc5c9;
  --primary-color-600: #269096;
  --secondary-color-400: #f0eceb;
  --secondary-color-600: #f4cbab;
  --neutral-color-100: #fff;
  --neutral-color-900: #000;
  --neutral-color-400: hsl(352, 0%, 27%);

  --ff-heading: Verdana, Geneva, sans-serif;
  --ff-main: Trebuchet MS, Lucida Grande, Lucida Sans Unicode, Lucida Sans,
    Tahoma, sans-serif;

  --fs-400: 1rem;
  --fs-450: 1.25rem;
  --fs-500: 1.5rem;
  --fs-600: 2rem;
  --fs-700: 2.5rem;
  --fs-800: 3rem;
}

/* mini reset */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/* ***********************
     Mobile styling below 
    ********************** */

body {
  background-color: var(--secondary-color-400);
}

/* ===================================
    Navbar/header w/logo styling 
   ===================================*/

.header {
  position: sticky;
  top: 0;
  width: 100%;
  height: auto;
  background: var(--primary-color-600);
  padding: 0.8rem;
  z-index: 999;
}

img {
  width: 100%;
  height: auto;
  max-width: 170px;
}

/* Navbar hamburger positioning */

.nav-toggle-label {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  margin-right: 1em;
  height: 100%;
  cursor: pointer;
}

/* Creates hamburger menu styling */

.nav-toggle-label span,
.nav-toggle-label span:before,
.nav-toggle-label span:after {
  display: block;
  background: var(--primary-color-400);
  height: 2px;
  width: 2.5em;
  border-radius: 10px;
  position: relative;
}

.nav-toggle-label span:before,
.nav-toggle-label span:after {
  content: "";
  position: absolute;
}

.nav-toggle-label span:before {
  bottom: 8px;
}

.nav-toggle-label span:after {
  top: 8px;
}

/* hides checkbox */
/* *hamburger menu acts as checkbox* */

.nav-toggle {
  display: none;
}

/* creates visable drop down when clicked */
/* -----transform-scale 1,1 makes it full height 
and width when the menu is clicked------- */
/* -----transition delays the list/links from appearing
until the drop down is fully down when clicked/checked---- */

.nav-toggle:checked ~ .nav-bar ul {
  transform: scale(1, 1);
}

.nav-toggle:checked ~ .nav-bar a {
  opacity: 1;
  transition: opacity 250ms ease-in-out 270ms;
}

/* navbar list styling */
/* pushes list upto the bottom edge of the header */
/* -----transform-scale 1, 0 keeps the width at 100% 
but the height at zero making it not visable----- */
/* ----transform allows a transition to be added --
transform-origin is where the visulisastion will start from--- */
/* ----transition is the speed at which the drop down drops down---- */

.nav-bar ul {
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  list-style: none;
  text-align: right;
  background: var(--primary-color-600);
  z-index: 999;
  transform: scale(1, 0);
  transform-origin: top;
  transition: transform 400ms ease-in-out;
}

/* opacity 0 is see through -- for transform */
/* -----transition makes the list/links disapear when
menu is not clicked/checked ---- */

.nav-bar li a,
.nav-bar li a:visited {
  text-decoration: none;
  color: var(--primary-color-400);
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.nav-bar li a:hover {
  color: var(--secondary-color-600);
}

.nav-bar li {
  margin-right: 1em;
  margin-bottom: 0.65em;
  text-transform: uppercase;
  font-family: var(--ff-heading);
  color: var(--primary-color-400);
  font-size: var(--fs-400);
}

/* ==============================
   Email entry -- submit styling 
   ==============================*/

.form-div {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-div h2 {
  color: var(--neutral-color-400);
  font-family: var(--ff-heading);
  font-size: var(--fs-700);
  text-transform: uppercase;
  line-height: 1;
}

.form {
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-input {
  font-family: var(--ff-main);
  font-size: var(--fs-400);
  margin-bottom: 0.75em;
  padding: 0.5em;
  width: 100%;
  min-width: 250px;
}

.submit-button {
  font-family: var(--ff-main);
  font-size: var(--fs-400);
  color: var(--primary-color-600);
  padding: 0.5em;
  border-radius: 10px;
  text-transform: uppercase;
  border: none;
  background: var(--secondary-color-600);
  box-shadow: 0px 4px 10px 0px var(--primary-color-600);
  width: 100%;
  cursor: pointer;
}

.submit-button:active {
  background: var(--primary-color-600);
  color: var(--secondary-color-600);
  box-shadow: 0px 4px 10px 0px var(--secondary-color-600);
}

/*===================================
         Features styling 
  ===================================*/
/* ----no icons for mobile view---- */
/* ----centered for mobile---- */

.icon {
  display: none;
}

.feats-flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3em;
  margin-top: 6em;
  margin-bottom: 6em;
  margin-left: 1em;
  margin-right: 1em;
}

.feat-desc h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-600);
  color: var(--neutral-color-400);
  margin-bottom: 0.5em;
  text-align: center;
}

.feat-desc p {
  font-family: var(--ff-main);
  font-size: var(--fs-450);
  color: var(--neutral-color-400);
  line-height: 1.5;
  max-width: 50em;
  margin: 0 auto;
}

/* ================================
          Video styling 
   ================================*/
/* ----remove set width and height from HTML and the below makes the iframe responsive---- */

.vid-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  margin: 0 auto;
  width: 90%;
  height: auto;
}

.vid-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
}

/* ===========================
     Pricing boxes - Styling 
   =========================== */

.pricing-container {
  width: 95%;
  margin: 0 auto;
}

.pricing-grid {
  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(300px, auto));
  grid-template-columns: repeat(auto-fit, minmax(300px, auto));
  gap: 3em;
  justify-content: center;
  align-items: center;
  margin-bottom: 7em;
  margin-top: 3em;
}

.level,
.product h2 {
  text-align: center;
  margin-bottom: 0.75em;
  font-family: var(--ff-heading);
  font-size: var(--fs-600);
}

.product {
  box-shadow: 3px 3px 10px 1px var(--neutral-color-400);
  border-radius: 5px;
}

.level {
  border-radius: 5px 5px 0px 0px;
  padding: 0.4em;
  background: var(--secondary-color-600);
  color: var(--primary-color-600);
  font-weight: bold;
  text-transform: uppercase;
}

.product h2 {
  font-size: var(--fs-700);
  color: var(--primary-color-600);
  font-weight: normal;
}

.product ol {
  list-style: none;
  margin-bottom: 2em;
  font-size: var(--fs-400);
  font-family: var(--ff-main);
  color: var(--neutral-color-400);
  line-height: 1.5;
  text-align: center;
}

.button {
  display: grid;
  text-transform: uppercase;
  border: none;
  background: var(--primary-color-600);
  color: var(--secondary-color-400);
  border-radius: 18px;
  padding: 1em;
  margin: 1em auto;
  cursor: pointer;
}

.button:active {
  background: var(--secondary-color-400);
  color: var(--primary-color-600);
  box-shadow: 0px 4px 10px 0px var(--primary-color-600);
}

/* ==========================
        Footer stlying 
   ========================== */

footer {
  background: var(--primary-color-600);
  padding: 1em;
}

footer a {
  text-decoration: none;
  color: var(--primary-color-400);
  text-transform: uppercase;
}

footer a:hover {
  cursor: pointer;
  color: var(--secondary-color-600);
}

footer a:visited {
  color: var(--primary-color-400);
}

footer ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding-bottom: 1em;
}

footer p {
  text-align: center;
}

/* ==========================
        Media quiries
   ========================== */

@media screen and (min-width: 700px) {
  .features {
    max-width: 80%;
    margin: 0 auto;
  }

  .icon {
    display: flex;
    color: var(--primary-color-600);
    font-size: 6rem;
    align-items: center;
    justify-content: center;
  }

  .plane {
    font-size: 5rem;
  }

  .feats-flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }

  .feat-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .feat-desc h2 {
    text-align: left;
  }

  footer ul {
    max-width: 70%;
    margin: 0 auto;
  }

  .feats-flex-container {
    margin-bottom: 9em;
  }

  .feats-flex-container p {
    font-size: var(--fs-500)
  }

  .feats-flex-container h2 {
    font-size: var(--fs-700)
  }

  .form-div h2 {
    font-size: var(--fs-800)
  }

  .pricing-grid {
    gap: 5em;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36 Edg/106.0.1370.37

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Codepen if easier:

Product Landing Page - Project fCC (codepen.io)

3

can you explain the problem another way?
For eg. what value did you use for the max-width and did you set it on the vid-container?
(i tried setting 800px max width on it and I didn’t see the issue but maybe I don’t know where to look)

1 Like
4

Hi
Yeah I added a max width to the video container and as you pull the screen width out it pushes the boxes below lower and lower the more the screen is expanded when you inspect the element it shows as padding from video.

5

Trying to record it but not working, if you set the max-width: 800px; on the video container then save and open the viewer out to a new window then scroll down to just under the video and above the pricing boxes and move the screen size smaller and larger you see the gap between the video and the boxes gets massive and grows as the screen is expanded. When there is no max width set this margin stays the same as is set in the CSS.

6

Check it out: Fluid Width Video | CSS-Tricks - CSS-Tricks

1 Like
7

Sorted it by taking the padding out and setting the aspect ratio on the container and the i frame.

Old

.vid-container {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  margin: 0 auto;
  width: 90%;
  height: auto;
}

.vid-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
}

New

.vid-container {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 90%;
  max-width: 800px;
  aspect-ratio: 16/9;
  margin-bottom: 8em;
}

.vid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
}