Header background problem

Language Help Make & Deploy a Website
1

I’m working on creating a website hosting my CV and I have a problem with my header section. When I downsize my screen component in the header move beneath each other. Yet my background color doesn’t increase in height, making one block fall outside the background color (see images). I can’t see how I can fix that. Can someone provide me some advice here? Relevant HTML and CSS provided below the images. Thank you for your help. :slight_smile:

Normal header

Small header:

HTML code:

   <header>
            <sectiion class="headerpicture">
                <img id="profielfoto" src="./recources/Images/My face.jpg" alt="Profielfoto van naam">
            </sectiion>
            <section class="headercontent">
                <h1>First and last name</h1><br>
                <h3 id="motto">Life motto/mission statement or something like that</h3>
            </section>
            <section class="perinfo">
                <h3>Persoonlijke gegevens</h3>
                <ul>
                    <li>Geboortedatum: </li>
                    <li>Woonplaats: </li>
                    <li>Nationaliteit: </li>
                    <li>E-mail: </li>
                    <li>Nummer: </li>
                </ul>
            </section>
        </header>

CSS code

header {
    background-color: aqua;
    min-height: 250px;
    max-width: 1600px;
    align-content: center;
    margin: auto;
    border-radius: 20px;
}

.headerpicture {
    display: block;
    margin-top: 20px;
    margin-left: 100px;
    float: left;
}

.headercontent {
    display: inline-block;
    padding-top: 75px;
    margin-left: 100px;
}

#profielfoto {
    height: 200px;
    width: 160px;
    border-radius: 70%;
}

header h1 {
    display: inline-block;

}

#motto {
    display: inline-block;
}

.perinfo {
    display: block;
    float: right;
    border: 3px solid black;
    padding: 10px;
    margin-top: 50px;
    margin-right: 100px;
}

.perinfo h3 {
    margin: auto;
    margin-bottom: 4px;
}

.perinfo ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
2

Hello!

First off, I see a typo in with the first <section> tag on your HTML (section with two i’s) - this isn’t the cause of your problem though, so let’s deep-dive in to the issue:

You seem to be mix & matching both display and float attributes to achieve your layout structure. Using float makes the component - well, float on top of it’s parent element, causing it to “fall off” when moving to mobile viewport.

My advice here would be to to get rid of using the floats entirely and make all three sections in your header display: inline-block. You can then use a fixed width value to adjust how the elements space out on the page. Use of percentages gives you the best results, if you want your page to be responsive in width.

To make the adjustments needed for mobile view (to get the sections on top of each other), you would need to utilize some media queries. They can be intimidating at first, but for your code in specific, this would suffice;

@media (max-width: 992px)
{
   .headerpicture, .headercontent, .perinfo {
    display: block;
    width: 100%;
  }
}

You should add this to the bottom of your CSS code to make sure you don’t run into issues with order importance.