Display felx problem when resizing the page

hello every one i wrote this code in html:

<div class="wrapper2">
                  <h2 class="footer"> <a href="#"> Content <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
                  <h2 class="footer"><a href="#"> information <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
                  <h2 class="footer"><a href="#"> legal <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem ipsum dolor sit amet.</p></a></h2>
                  <h2 class="footer"><a href="#"> help <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
                  <h2 class="footer"><i class="fas fa-phone-alt"></i>3-6000-0000
                    -6000-000-0000</h2>
                  <h2 class="footer6"><i class="fas fa-map-marker-alt"></i>67700 Dagenham St
                    England, GB</h2>
              </div>

and this is the css for it:

.wrapper2{
    display: flex;
    justify-content: space-between;
    padding:20px;
    background: #1f3138;
    color: white;
}
.wrapper2 h2{
    text-transform: uppercase;
}
.wrapper2 a{
    text-decoration: none;
    color: white;
}
.p2{
    margin-top: -1em;
}
.wrapper2 i{
    padding-right: 10px;
}

i made it display felx when i resize the page lower than 1920px width the h2 getinng close to each other and it is not making the space between can any one help please.

Well yeah, because my browser defaults to 24px for h2. you need a media query and font-size for smaller screens, try 16px. Don’t rely on browser defaults to style your text. It won’t have a consistent look across devices or browsers. h2s aren’t containers for other content. You should be doing something like:

<footer>
  <div>
    <h2><a>Content</a></h2>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
  <div>
    <h2><a>Information</a></h2>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
<!-- etc, etc -->
</footer>

If you want the h2 to be the link.
Hope this helps.

1 Like