Make text in header responsive on all screens

user_17138976 0
Viewed 57

how do I make the 'name' text align to the center for different screen resolutions? I think the culprit is I hid the TikTok logo on smaller screens. Thanks in advance for your help!

HTML:

<div class="header">
  <h2 class="name">Name</h2>
  <a
    class="social-icon-header"
    href="https://www.tiktok.com/@xxx"
    target="_blank"
  >
    <i class="fab fa-tiktok fa-2x"></i>
  </a>
</div>

CSS:

/* Header */

.social-icon-header {
  display: none;
}

.name {
  text-align: center !important;
  justify-content: center !important;
  /* padding-left: 15%; */
}[![screenshots][1]][1]
responsive-design css
1 Answers

You can use flexbox and don't forget to set the height(in this case min-height:100vh) property. If you want to center also vertically.If not you can remove it. And if you want to make strictly responsive text, use this resource

/* Header */

.social-icon-header {
  display: none;
 
}

.name {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="header">
  <h2 class="name">Name</h2>
  <a class="social-icon-header" href="https://www.tiktok.com/@tretuser" target="_blank">
    <i class="fab fa-tiktok fa-2x"></i>
  </a>
</div>

user_137059790
Related