NameCheap course help!

Hi all,
I am currently working on my final project for the “make your own website with namecheap” course.

I am having trouble with the homepage, specifically when I enlarge the window, the second line of text, the h3 element appears next to the h2 element instead of below it. When i shrink the window it appears perfect. The example version looks fine however mine does not! Could anyone have a look at my code and see where I have gone wrong please?

How it should look -


How mine looks -

This is my code

<section class="jumbotron">
    <div class="container">
      <div class="row">
        <h2> Web Developer</h2>
        <h3> HTML, CSS, JavaScript </h3>
      </div>
      </div>
    </section>

It is probably glaringly obivous but appreciate any feedback/help!

Many thanks

Hi Tokyo,

if you remove your CSS and just open this snippet as plain html in the browser, you’ll see that the headlines will be below each other whatever the viewport width is. That’s because headings are block level elements by default.

That means the error can either be found within your CSS or in the rest of your html (a non closing tag for example).
Without seeing that we won’t be able to help I’m afraid.

Hi there,

Thanks for this info. Interestingly I haven’t touched the CSS yet as it’s pre-built for the exercise by Codecademy. I’ll have a look and see what’s causing the issue. If it’s an error in the tutorials code I’ll report it to Codecademy. Thanks again for your help

Hey!

So i have had a look at both the CSS and the HTML. I will paste below, if you could have a browse? Any help would be awesome!

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Personal Portfolio</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
    <link href="style.css" type="text/css" rel="stylesheet">
  </head>
  <body>
    <header class="container">
      <div class="row">
        <h1 class="col-sm-6">Tokyo Lamberth</h1>
        <nav class="col-sm-6 text-right">
          <a href="about.html">About Me</a>
        <a href="education.html">Education</a>
        <a href="experience.html">Experience</a>
          </nav>
        </div>
    </header>
  <section class="jumbotron">
    <div class="container">
      <div class="row">
        <h2>Web Developer</h2>
        <h3>HTML, JavaScript, CSS</h3>
      </div>
      </div>
    </section>

    <footer class="container">
      <div class="row">
        <p class="col-sm-4">&copy; 2021 Alistair Lamberth</p>
        <div class="col-sm-2"><a href="https://github.com/">Github</a></div>
        <div class="col-sm-2"><a href="https://www.linkedin.com/">LinkedIn</a></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        </div>
      </footer>

  </body>
</html>

CSS

body {
  font-family: Roboto, sans-serif;
  background-image: url('https://content.codecademy.com/courses/learn-css-selectors-visual-rules/hypnotize_bg.png');
}

header {
  padding: 20px 0;
}

header .row,
footer .row {
  display: flex;
  align-items: center;
}

h1 {
  font-weight: 700;
  margin: 0;
}

nav {
  display: flex;
  justify-content: flex-end;
}

a {
  padding: 0 20px;
  margin: 0;
}

.jumbotron {
  display: flex;
  align-items: center;
  background-image: url('https://content.codecademy.com/projects/personal_portfolio/background.jpeg');
  background-size: cover;
  color: #ffffff;
  height: 400px;
}

.jumbotron h2 {
  font-size: 60px;
  font-weight: 700;
  margin: 0;
  color: #fff;
}

.jumbotron h3 {
  margin: 0 0 20px;
  color: #fff;
}

section .row img {
  margin: 0 0 30px;
  width: 100%;
}

.col-md-6 {
  margin: 0 0 30px;
}

.btn.btn-primary {
  border-radius: 2px;
  border: 0px;
  color: #fbd1d5;
  background-color: #ffffff;
}

.btn.btn-primary:hover {
  color: #ffffff;
  background-color: #fbd1d5;
}

.btn-secondary {
  background-color: #2a70e0;
  color: #ffffff;
  margin: 0 0 30px;
}

.portrait {
  width:  350px;
  height: 300px;
}

figure img {
  width: 100%;
  height: auto;
}

figure {
  margin-bottom: 30px;
}

footer {
  font-size: 12px;
  padding: 20px 0;
}

footer .col-sm-8 {
  display: flex;
  justify-content: flex-end;
}

footer ul {
  list-style: none;
}

Did you change anything in the meantime?
When I paste that, the h3 is displayed below the h2.

No I haven’t changed anything. Really weird! I’ll try and see what I can do! Thanks for your help!!

1 Like