Help with making my Landing Page responsive

Hello everyone, first time posting here :smiley:

So, i’m almost done with my “Product Landing Page” project. I’ve already made the desktop version and now i’m adding media queries to make it responsive.
There are two bits that are giving me trouble:

  1. Feature-list: my “#feature” and “.feature-list” doesn’t seem to respond to a different screen size. No matter what i do, it doesn’t change anything. I’ve tried changing it’s width, changing it’s text-align property, changing the display and nothing seems to work. What i’m trying to achieve is making the text fit on screen and align center, but it’s not happening and i have no idea why.

  2. Pricing blocks: the other problem is with my pricing blocks, which are side-by-side on the desktop version and i want to make them one below the other on mobile. Again, no matter what i try, it’s not working, they just get thinner.

I believe both problems are connected due to the fact that both these sessions are displayed as grids.

Can someone help me?

HTML Code:

<div id="header-div">
<header id="header">
  <img src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" id="header-img">
  <nav id="nav-bar">
    <ul>
      <li><a href="#features" class="nav-link">Features</a></li>
      <li><a href="#how-it-works" class="nav-link">How it works</a></li>
      <li><a href="#pricing" class="nav-link">Pricing</a></li>
    </ul>
  </nav>
</header>
</div>

<div id="form-div">
<h1>Handcrafted, home-made masterpieces</h1>
<form action="https://www.freecodecamp.org/email-submit" id="form">
  <input 
         type="email"
         name="email"
         placeholder="Enter your email address"
         id="email"
         required
          >
  <br>
  <input 
          type="submit"
          id="submit"
          value="Get started"
          >
  </input>
</form>
</div>

<div id="features">
  <div class="feature-list">
    
    <div class="icon"><i class="fa fa-fire"></i></div>

    <div class="desc">
      <h2>Premium Materials</h2>
      <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
    </div>

  </div>
  
  <div class="feature-list">
    
    <div class="icon"><i class="fa fa-truck	"></i></div>
    
     <div class="desc">
       <h2>Fast Shipping</h2>
       <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
    </div>
  </div>
  
  <div class="feature-list">
    
    <div class="icon"><i class="fa fa-battery-full"></i></div>
    
    <div class="desc">
      <h2>Quality Assurance</h2>
      <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
    </div>
  </div>
</div>

<div id="how-it-works">
  <iframe
          width="600"
          height="300"
          src="https://youtu.be/y8Yv4pnO7qc"
          id="video"
          >
  </iframe>
</div>

<div id="pricing">
  <div class="prices" id="tenor">
    <h3 class="trombone">Tenor Trombone</h3>
    <h2>$600</h2>
    <p>Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
    <button> Select </button>
  </div>
  
  <div class="prices" id="bass">
    <h3 class="trombone">Bass Trombone</h3>
    <h2>$900</h2>
    <p>Lorem ipsum.<br>Lorem ipsum.<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
    <button> Select </button>
  </div>
  
  <div class="prices" id="valve">
    <h3 class="trombone">Valve Trombone</h3>
    <h2>$1200</h2>
    <p>Plays similar to a Trumpet<br>Great for Jazz Bands<br>Lorem ipsum dolor.<br>Lorem ipsum.</p>
    <button> Select </button>
  </div>
</div>

<footer>
  <div id="footer">
    <ul>
      <li><a href="#features">Privacy</a></li>
      <li><a href="#features">Terms</a></li>
      <li><a href="#features">Contact</a></li>
    </ul>
    <p>Copyright 2016, Original Trombones</p>
  </div>
</footer>

CSS Code:

:root {
  --light-gray: #f5f5f5;
  --mustard-yellow: #ffc400;
}

body {
  background-color: var(--light-gray);
  font-family: sans-serif;
}

header {
  padding: 1em;
  background-color: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

header ul {
  display: flex;
}

@media (max-width: 600px) {
  header, header ul {
    display: block;
    margin: auto;
    text-align: center;
    line-height: 1.5;
  }
  
  .icon {
    display: none;
  }

 
}

header li {
  margin: auto 3em auto auto;
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #000;
}

#header-img {
  width: 20em;
  max-width: 100%;
  height: auto;
}

#form-div {
  text-align: center;
  margin: 12em auto 7em auto;
  line-height: 2.5em;
}

#email {
  max-width: 250px;
  width: 100%;
  height: 1.5em;
  padding-left: 0.5em;
  margin-bottom: 1.5em; 
}

#submit {
  max-width: 150px;
  width: 100%;
  height: 2.5em;
  border: none;
  background-color: var(--mustard-yellow);
  text-transform: uppercase;
  font-weight: 800;
}

#features {
  width: 50%;
  margin: auto;
}

i {
  color: var(--mustard-yellow);
  transform: scale(3);
}

.feature-list {
  margin-bottom: 3em;
  display: grid;
  grid-template-columns: 10% 80%;
  align-items: center;
}

#how-it-works {
  text-align: center;
  margin: 5em auto 5em auto;
}

iframe {
  max-width: 600px;
  width: 100%;
  border: none;
}

#pricing {
  text-align: center;
  line-height: 1.6;
  width: 60%;
  margin: auto;
  display: grid;
  grid-template-areas: 'tenor bass valve';
  grid-column-gap: 1.5em;
}

.prices {
  border: 1px solid;
}

#tenor {
  grid-area: tenor
}

#bass {
  grid-area: bass
}

#valve {
  grid-area: valve;
}

.trombone {
  margin: 0;
  padding: 1.5em;
  background-color: #dbdbdb;
  text-transform: uppercase;
  font-weight: 550;
  font-size: 15px;
}

.prices button {
  width: 35%;
  padding: 1em;
  margin: 1em 0 2em 0;
  border: none;
  background-color: var(--mustard-yellow);
  text-transform: uppercase;
}

#footer {
  width: 60%;
  margin: 4em auto 0 auto;
  padding: 0.5em 1em 0.5em 1em;
  line-height: 0.7;
  background-color: #dbdbdb;
  text-align: right;
}

footer ul {
  display: flex;
  justify-content: flex-end;
}

footer li {
  list-style-type: none;
  margin-left: 1em;
}

footer p {
  font-size: 14px;
  opacity: 0.5;
}

My browser information:

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

Challenge: Build a Product Landing Page

Link to the challenge:

My pen: https://codepen.io/fschneider/full/mdVVVWv

Bump :eyes: i have no idea what’s wrong, i know i can change display to flex but eventually i’ll need to use grid and i need to learn.

hey @fernandosscofano,

i dont know grid as i use flex box so i changed your code to flex instead…

the flex-wrap makes them wrap when the screen shrinks, the justify-center makes sure they stay in the center when wraped.

width is needed on the .prices or they wont wrap

#pricing {
  text-align: center;
  line-height: 1.6;
  width: 60%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.prices {
  border: 1px solid;
  width: 250px;
  margin: 10px;
}

i will check the feature now…

1 Like

Grid is something that is taught so you understand the concept, but in theory flex is used by 8 out of 10 developers pretty consistently (based on what I’ve read and who I’ve talked to). display: grid is like being tested on K-turns during your driving exam.

I’m sure @biscuitmanz will figure out your issue with your feature, but can you explain what’s happening and what you’re looking for exactly? Are you trying to have the font size scale up and down with the adjustment of the browser while staying centered or something else?

1 Like

Just applied your solution and worked like a charm, thanks :slight_smile:

1 Like

@fernandosscofano add this to your @media this should help with your features, make sure to put this below the #features css, infact it better to put all your media at the bottom of your css otherwise it wont work if its above the main css, also remove the grid stuff from .feature-list


  #features {
    width: 100%;
    padding: 0 20px;
    text-align: center;
  }
  

there is still some stuff that has problems but you should be able to fix them yourself mate :slightly_smiling_face: if not let me know.

1 Like

Grid is something that is taught so you understand the concept, but in theory flex is used by 8 out of 10 developers pretty consistently

That’s very good to know, thank you. It’s way easier to work with flex blox lol.

but can you explain what’s happening and what you’re looking for exactly?

Ofc. What i’m trying to do is make my feature list change it’s text-align to center and properly fit on screen. I believe this will illustrate what i want:

Left is how it currently is; right is how i want it to be.

As you can see, in the way it currently is, not only does my text stay aligned to the left, but it also seems to be inside a very thin column and i have no idea what’s causing this issue.

infact it better to put all your media at the bottom of your css otherwise it wont work

Didn’t think of that but i guess it makes sense. It’s because CSS prioritizes what’s on the bottom, right?

there is still some stuff that has problems but you should be able to fix them yourself mate :slightly_smiling_face: if not let me know.

Thank you so much for your help. The code that you gave me solved my issue, i just need to fix some other stuff like you said. Is there a reason as to why you don’t work with grid? JohnJohn said most developers use flex, you think it’s safe for me to mostly work with flex too?

@fernandosscofano its because code is read from top to bottom so you cant use a media query if its above the original code, so this wouldn’t work…


@media (max-width: 600px) {
  header{
 
  }
}

header {

}

you cant overwrite something that hasn’t been read yet.

once i learned flex i just haven’t needed to use grid for anything as i have done just fine with flex, there are some benefits to using grid but i haven’t need to use it so far, yeah i think you will pick up flex quicker so id say jump into that, you can always learn grid later on if you want theres no reason you cant learn both as they both have there benefits but id start with flex as its easier to learn.

heres a few games to help you learn flex…

2 Likes

I’ll check that out. Thanks for everything @biscuitmanz, you were of great help! :grin:

1 Like