Product landing page

HTML-CSS
1

I’m trying to make my select button align to the center but when i checked it out on mobile view, it doesn’t look good as i want…Please i need help on how i can make my select button align to the center even when i open it on mobile phones…Here’s my code in HTML and CSS structure below…

unnamed (2)
unnamed (2)524×1080 330 KB 

<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/fa4d84cc52.js" crossorigin="anonymous"></script>

<body>
  <header id="header">
    <div class="logo">
      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">
    </div>

    <div class="container">
      <nav id="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>
    </div>
  </header>

  <section id="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form action="https://www.freecodecamp.com/email-submit" id="form">
      <input type="email" id="email" name="email" placeholder="Enter your email address" required />
      <input type="submit" id="submit" value="GET STARTED" class="btn" />
    </form>
  </section>

  <main>
    <section id="features">
      <div class="features">
        <div class="icon"><i class="fa-solid fa-spa"></i>
        </div>

        <div class="description">
          <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="features">
        <div class="icon">
          <i class="fa-solid fa-truck"></i>
        </div>

        <div class="description">
          <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="features">
        <div class="icon">
          <i class="fa-solid fa-square-check"></i>
        </div>

        <div class="description">
          <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>
    </section>
  </main>

  <section id="how-it-works">
    <iframe id="video" width="560" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
  </section>

  <section id="pricing">
    <div class="product">
      <div class="product-name">TENOR TROMBONE</div>
      <h3>$600</h3>
      <ol>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="button">SELECT</button>
    </div>

    <div class="product">
      <div class="product-name">BASS TROMBONE</div>
      <h3>$900</h3>
      <ol>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="button">SELECT
      </button>
    </div>

    <div class="product">
      <div class="product-name">VALVE TROMBONE</div>
      <h3>$1200</h3>
      <ol>
        <li>Plays similar to a Trumpet</li>
        <li>Great for Jazz Bands</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="button">SELECT</button>
    </div>
  </section>
</body>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: arial, verdana;
  background-color: #f0ebe3;
}

#header {
  position: fixed;
  top: 0;
  min-height: 80px;
  display: flex;
  width: 100%;
  height: 80px;
  padding: 15px;
  justify-content: center;
  align-items: space-around;
  background-color: inherit;
}

ul {
  list-style: none;
}

@media (max-width: 700px) {
  header {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
}

.logo img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 25px;
}

nav {
  text-align: right;
}

#nav-bar {
  text-align: right;
  max-width: 2000px;
  display: inline-block;
  position: initial;
  padding-left: 25rem;
  margin-left: 10px;
}

.nav-link {
  font-size: 1.2rem;
  text-decoration: none;
  color: black;
  display: flex;
  align-items: center;
  padding: 10px;
  text-align: right;
}

#header-img {
  filter: grayscale(100%);
  width: 100%;
  height: 100%;
}

#hero {
  margin: 7rem auto 2rem;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100px;
  font-size: 1.6rem;
  padding-right: 10%;
}

#hero h1 {
  word-wrap: break-word;
  justify-content: center;
  align-items: center;
  font-family: times new roman, verdana;
}

#hero input[type="email"] {
  width: 100%;
  max-width: 400px;
  padding: 5px;
  margin: 0rem;
  border-radius: 80px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

.btn {
  padding: 0 20px;
  height: 40px;
  font-size: 20px;
  font-weight: 1000;
  text-transform: uppercase;
  border: 2px solid black;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
}

#hero input[type="submit"] {
  max-width: 200px;
  width: 100%;
  height: 30px;
  margin: 20px 0;
  border: 0;
  background-color: lightgreen;
}

#nav-bar ul {
  width: 30vw;
  height: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

#nav-bar ul li {
  display: inline-block;
  margin: 10px;
  text-align: center;
  align-items: center;
  padding-bottom: 10px;
  justify-content: space-around;
}

.container {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

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

main {
  justify-content: center;
  align-items: center;
  max-width: 900px;
  margin: 10rem auto;
  padding-right: 10px;
}

.features {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  padding-left: 2px;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 5rem;
  padding-left: 5px;
  margin: 20px;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  margin: 10px;
  font-size: 20px;
}

.description > h2 {
  font-size: 30px;
  padding-left: 0px;
}

.fa-solid {
  display: column;
  font-size: 3rem;
  color: darkgreen;
  padding: 20px;
}

.description,
h2 {
  display: flex;
}

#how-it-works {
  display: flex;
  justify-content: center;
}

iframe #video {
  max-width: 560px;
  width: 100%;
  display: block;
  margin: 100px;
}

#pricing {
  display: flex;
  justify-content: center;
  padding: 5rem;
}

.product {
  margin: 2rem;
  border: 1px solid black;
  width: 200%;
  line-height: 40px;
  border-radius: 3px;
}

.product-name {
  padding: 1rem;
  display: flex;
  justify-content: center;
  line-height: 30px;
  background-color: #ddd;
}

h3 {
  display: flex;
  justify-content: center;
  font-size: 25px;
  padding: 1rem;
}

ol {
  display: block;
  justify-content: center;
}

li {
  display: flex;
  justify-content: center;
}

.product > button {
  font-size: 15px;
  background-color: lightgreen;
  margin: 5%;
  padding: 1em;
  width: 29%;
  margin-left: 8.5rem;
}

.product > button:hover {
  background-color: lightgreen;
  transition: background-color 1s;
}
1 Like
2

Anyone to help on this please??

3

1st theory: the above prop is the source of problem.
Try to comment it it out and see how it goes.

4

okay i’ll do that & let you know if that works for me…Thank you!!!

5

To clarify: the below is the pen for this page?

6

yes that’s the pen link to the page

7

Hey, I don’t know if this helps or not, but when starting to code, put a meta element too. <meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0"
I think the viewport option will make the webpage functionable in all devices.
Let me know if this helps, because I’m still learning and trying my best to help. Even if I’m wrong, any suggestion will be appreciable.

8

Actually it appears your buttons slightly shifted to right even on wider screens. That’s margin-left, I almost sure now.

9

It’s good advice. But that’s specific of Codepen actually. Some of the code from HTML can not be seen right away there.
So if the author pasted code from Codepen here, that explains some meta tags missing

10

Oh. So codepen by default hides some code tags like meta.

11

Something like that.
Feel free to check out the below:

12

@AresHawkins I greatly appreciate your help and I’ll try that & let you know if that worked for me…We are all here to learn & no one knows it all…Once again thank you !!!

13

Yeah that’s the problem I’m having and I want it to align to center…Any suggestion on how I can solve this ?

14

So did you try to remove margin-left from buttons? It helped or not?

15

@admit8490
Yes i did just now but no changes yet :sob: :sob: :sob: :sob:
After i removed the margin-left, here’s what i got below…It aligned my select button to the left…

unnamed (1)
unnamed (1)1920×1440 200 KB

16

try to change margin from 5% to auto
or maybe
to 0 auto

I was trying to set margins with percent some time ago and it was weird.

17

I did again just now & no changes yet…It’s still aligned to the left & i want it aligned to center…I think there’s a mix up somewhere, still trying to figure it out though, i’m stucked!!!

18

I need update. How this selector looks after changes?

19

Buttons are inline elements by default, so auto margins will only work if you change the display to block.

1 Like
20

Yes! Honestly I completely forgot this :upside_down_face: