Kevin Powell - Community•3mo ago

How to align top of picture with header title?

Hey everybody, I'm a beginner software dev and I'm currently working on a practice flexbox project, I wanted the top of my image to line up exactly with my header title "Heroes for Hire" and I can't think of a way to do this although I'm sure there is, anybody able to help? Here is a pen: https://codepen.io/Oothman/pen/MWMRwGB

Oothman

CodePen

Untitled

...

8 Replies

Chris Bolson•3mo ago

This might be simpler in grid but, assuming that you want, or are limited to do this in flex, you need to have 2 children within your header. The first one to hold the title and text and the second one to hold the image. So your header-content HTML might look like this:

<div class="header-content">
      <div>
          <h1>Heroes For Hire</h1>
          <p class="welcome-text">Welcome to Heroes For Hire, the world's premier service for superhero protective services.
        No job is too big or small for our brave heroes, contact now for a quote!</p>
      </div>
      <img class="header-img" src="img/supersolutions-img.jpg">
    </div>

<div class="header-content">
      <div>
          <h1>Heroes For Hire</h1>
          <p class="welcome-text">Welcome to Heroes For Hire, the world's premier service for superhero protective services.
        No job is too big or small for our brave heroes, contact now for a quote!</p>
      </div>
      <img class="header-img" src="img/supersolutions-img.jpg">
    </div>

Then, in the CSS for this header-content wrapper you need to have flex and remove the flex-wrap and width that you have defined along the way. The CSS for this part might look like this:

.header-content {
  display: flex;
}
h1 {
  margin: 0; /* remove browser default margins */
  font-size: 48px;
  color: #F9FAF8;
  font-weight: 900;
}
.welcome-text {
  font-size: 18px;
  color: #E5E7EB;
  text-wrap: balance;
}

.header-img {
  width: 100%;
  max-width: 300px;
  height: fit-content;
  object-fit: cover;
}

.header-content {
  display: flex;
}
h1 {
  margin: 0; /* remove browser default margins */
  font-size: 48px;
  color: #F9FAF8;
  font-weight: 900;
}
.welcome-text {
  font-size: 18px;
  color: #E5E7EB;
  text-wrap: balance;
}

.header-img {
  width: 100%;
  max-width: 300px;
  height: fit-content;
  object-fit: cover;
}

13eck•3mo ago

.header-content {
  display: flex;
}
h1 {
  margin: 0; /* remove browser default margins */
  font-size: 3rem;
  color: #F9FAF8;
  font-weight: 900;
}
.welcome-text {
  font-size: 1.125rem;
  color: #E5E7EB;
  text-wrap: balance;
}

.header-img {
  width: 100%;
  max-width: 300px;
  height: fit-content;
  object-fit: cover;
}

.header-content {
  display: flex;
}
h1 {
  margin: 0; /* remove browser default margins */
  font-size: 3rem;
  color: #F9FAF8;
  font-weight: 900;
}
.welcome-text {
  font-size: 1.125rem;
  color: #E5E7EB;
  text-wrap: balance;
}

.header-img {
  width: 100%;
  max-width: 300px;
  height: fit-content;
  object-fit: cover;
}

You should be using either rem or em for font sizing. Using pixels ignores your user's preferences and is not responsive at all. Please use rem for font sizing!

OothmanOP•3mo ago

Thank you so much, appreciate it! Yeah this is specifically a flexbox exercise and I'm yet to look at grid at all in the course.

13eck•3mo ago

Love your finger-gunz emoji! :fingerguns_skeleton:

OothmanOP•3mo ago

Thank you very much, yeah I actually read an article about this exact topic a few days ago but was just focusing on positioning with flexbox so forgot about it, really appreciate the reminder!

13eck•3mo ago

Best to start early to burn it into your muscle memory so it becomes habit, IMO

Chris Bolson•3mo ago

I totally agree on using em or rem for font-sizing. I just didn't want to distract from the original question.

OothmanOP•3mo ago

Definitely agree, always best to drill in good habits early! In fact, I realise now that the course styling sheet provided has the text sizes given in pixels which is probably what made me go with that, I'll make the suggestion to the organisers to switch it to rem for best practice :thanks:

Gaming

Programming

How to align top of picture with header title?