Responsive text padding

Question

I have a little menu and I want to make the padding from a specific link responsive. How can I do that? The CSS part is actually SCSS, but I think you can figure out what should I change to solve the problem. I tried to use percenteges instead of rem, but the code broke.

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2rem 4.1rem;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}

<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

Thank you!

Note: no webkit browser has needed those vendor prefixes for many years and many versions ago. — Rob, Feb 11 '20 at 19:25
Be alert while using **em** or **rem** because their approach to calculate the pixels is very different from other units. — Abhishek Kamal, Feb 11 '20 at 19:38
if you have a font size responsive, why do you use rem units for padding when em would do ? — G-Cyrillus, Feb 11 '20 at 19:55

score 1 · Answer 1 · answered Feb 11 '20 at 19:44

How About setting it for vw

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2vw 4.1vw;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}

<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

score 1 · Answer 2 · answered Feb 11 '20 at 20:01

I make my comment :

if you have a font size responsive, why do you use rem units for padding when em would do ?

an answer for a feed back ;)

em padding instead rem since font-size is calc(12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));

header nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 10vh;
}

header nav .logo {
  -webkit-box-flex: 4;
      -ms-flex: 4 1 25rem;
          flex: 4 1 25rem;
}

header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40rem;
          flex: 1 1 40rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

header nav ul li a {
  font-size: calc(
 12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
  /* Make font-size fluid, from 64px max. to 36px min. */
  font-family: "Montserrat", sans-serif;
  font-weight: 200;
  color: #667696;
}

header nav .signUp a {
  color: #1063dc;
  font-weight: 400;
  padding: 1.2em 4.1em;
  border-style: solid;
  border-color: #1063dc;
  border-width: 0.2rem;
  border-radius: 1rem;
}

<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

Tet Nuc · Answer 3 · 2020-02-11T20:12:52.623

header nav {
    display: flex;
    flex-direction: row;
    min-height: 10vh;
    align-items: center;
  }
  
  header nav .logo {
    flex: 5vw;
    margin: auto;
  }
  
  header nav ul {
    display: flex;
    flex: 1 1 40rem;
    justify-content: space-between;
    margin: auto;
  }

  header nav ul li {
    list-style: none;
  }
  
  header nav ul li a {
    font-size: calc(
   12px + (16 - 12) * ((100vw - 300px) / (1600 - 300)));
    /* Make font-size fluid, from 64px max. to 36px min. */
    font-family: "Montserrat", sans-serif;
    font-weight: 200;
    color: #667696;
  }
  
  header nav .signUp a {
    color: #1063dc;
    font-weight: 400;
    padding: 1rem 4vw;
    border-style: solid;
    border-color: #1063dc;
    border-width: 0.2rem;
    border-radius: 1rem;
  }

<header class="mainHead">
        <nav>
          <div class="logo">
            <a href="#"><img src="/img/logo.svg" alt="Logo Image"/></a>
          </div>
          <ul>
            <li><a href="#">Product</a></li>
            <li><a href="#">Features</a></li>
            <li><a href="#">Pricing</a></li>
            <li><a href="#">Support</a></li>
            <li class="signUp"><a href="#">Sign Up</a></li>
          </ul>
        </nav>
      </header>

I would remove WebKit CSS extensions, as flex layout is supported by almost all browsers. Just to keep code cleaner:

https://caniuse.com/#feat=flexbox

score 0 · Answer 4 · answered Feb 11 '20 at 19:52

...Or just using a hover pseudo selector in CSS. there are ways to target the objects/elements style using JS if you need to get more complicated. But this will dynamically add padding as per your question. for the JS approach to selecting an elements style use this:

let element = document.getElementById("myElement"); element.style.padding = '5px';

below is the quick way to add a dynamic padding (or dynamic anything) in CSS:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <style>
            li:hover {
                padding-bottom: 15px;
            }
        </style>
    </head>

    <body>
        <header class="mainHead">
            <nav>
            <div class="logo">
                <a href="#"><img src="https://www.hollywoodreporter.com/live-feed/simpsons-feature-live-segment-homer-866370" alt="Logo Image"/></a>
            </div>
            <ul>
                <li><a href="#">Product</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Support</a></li>
                <li>class="signUp"><a href="#">Sign Up</a></li>
            </ul>
            </nav>
        </header>
    </body>

</html>

If you need it based on screen size/device, you need to learn about media queries in CSS. that will allow you to code different CSS for different devices.

Responsive text padding

4 Answers4