How to intentionally wrap an element using css?-CodePudding

When I reach 440px I want to divide the nav in two lines: one for the icons, one for the button (every line should use 100% of the width). I have no idea how to do this. Thank you.

This is what I got.

HTML:

<div >
     <h1>Hi! I'm Lautaro Rojas</h1>
     <h2>So one at were where</h2>
     <nav>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
       <button>View Resume</button>
    </nav>
</div>

CSS:

.content nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.content nav a {
    margin-right: 39px;
}

.content a img {
    width: 40px;
    height: 40px;
}

CodePudding user response：

First you need to put your icons inside div:

<nav>
    <div>
        <a href="#"><img src="img/linkedin.png" alt="LinkedIn" /></a>
        <a href="#"><img src="img/github.png" alt="GitHub" /></a>
        <a href="#"><img src="img/instagram.png" alt="instagram" /></a>
    </div>
    <button>View Resume</button>
</nav>

And then you need to add this media tag to your css:

@media all and (max-width: 440px) {
    .content nav {
        flex-direction: column;
        align-items: center;
    }
}

CodePudding user response：

You can do this easily by using the CSS Media Queries.

@media screen and (max-width: 440px) {
    nav button{
        display: block;
        margin: 0px auto;
    }
}
@media screen and (min-width: 440px) {
    nav button{
        display: inline-block;
    }
}
nav{
    text-align: center;
}
nav a{
    display: inline-block;
}
.content a img {
    width: 40px;
    height: 40px;
}

<div >
  <h1>Hi! I'm Lautaro Rojas</h1>
  <h2>So one at were where</h2>
  <nav>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="1" /></a>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="2" /></a>
    <a href="#"><img src="https://i.ibb.co/YWcKxJD/1.png" alt="3" /></a>
    <button>View Resume</button>
  </nav>
</div>

Thanks and best regards!