Product Landing Page Project HELP!

I can’t post links yet [edit - pen added], but here is my fork on codepen.

I am having such a difficult time with the product landing page. I want to have the form centered in the pricing section. I also want the nav-bar to be on top of content when I scroll down. The media query also isn’t working for me. All the codes I’ve tried don’t seem to work. What am I doing wrong? Any suggestions? Thank you!

Could you post a mockup (pen and paper, MS paint, wireframe, ASCII art…) of what you want the layout to look like? I’m having trouble visualizing it based on your description.

It already is, but opacity: 1; makes the content below show through.

In pure CSS, you can’t nest media queries inside selectors, only the other way around. You need to organize your CSS something like this:

#pricing {
  display: flex;
  flex-direction: row;
  /* ...etc */
}
    
@media (max-width: 300px) {
  #pricing {
    flex-direction: column;
    /* ...etc */
  }
}

Thank you for you help! It didn’t even accure to me that the opacity was making the content show through, duh. I changed the colors to hsl to get the lightness I wanted. I also put the @media outside of the #pricing, but it still isn’t doing what I want. Here are the example of what I’m trying to accomplish.
The normal display. The flex box will have 2 rows (top with 4 columns, bottom with 1 column):

With media max-width being 300px the flex box will become all columns in a streamlined manner (unlike the example I made):

Ah, gotcha. You’ll need something like this:

HTML

<div class="outer-container">
  <div class="pricing-info">
    <!-- various content paragraphs, headings, etc. -->
  </div>
  <form action="#" class="email-form">
    <!-- form content -->
  </form>
</div>

CSS

.outer-container {
  display: flex;
  flex-direction: column;
}

.pricing-info {
  display: flex;
  flex-direction: row;
}

@media (max-width: 300px) {
  .pricing-info {
    flex-direction: column;
  }
}

.email-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}
1 Like

It’s taken me a few trys but I think I’ve got it now.

Thank you! Thank you! Thank you!

1 Like

Actually still having errors when I resize my browser screen. The .pricing-info isn’t flexing to a column.

Here is my code so far for the media. But the .pricing-info doesn’t seem to do anything when I resize my browser. Any ideas?

@media (max-width: 350px) {
  .pricing-info {
    flex-direction: column;
    margin: 120px 0px 0px 0px;
    align-items: center;
    padding: 0px;
  }
}

Your media query is triggering just fine at the 350px breakpoint, but 350px is pretty narrow. Try changing it to 750 or 800 pixels, you should see the change then.


I’ve also edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like