Question 218520 in Html Question posted in
Some basic documentation can be found here.

In CSS file where I applied 16px font size to whole html tag.but now when I am trying to change the footer size by .75rem the size is not changing

I applied font-size: 16px to the html tag but when i’m trying to change other tag’s font-size, the fonts are not changing they are still at 16px.
Below as it can be seen that html tag is set to 16px and at down below right there in the footer .content i applied "font-size: 0.75;" but font size is still same and at similarly little up there in quotes-section quote i tried to do the same thing but still i’m unable to change the size.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width," initial-width="1">
  <link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
  <link rel="stylesheet" href="./resources/css/reset.css">
  <link href="style.css" rel="stylesheet">
  <link href="reset.css" rel="stylesheet">
  <meta charset="UTF-8">
</head>
<body>
  <!-- Header -->
  <header>
    <div class="content">
      <a href="index.html" class="desktop logo">Fotomatic</a>
      <nav class="desktop">
        <ul>
          <li><a href="#">Product detail</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="https://www.instagram.com/">Follow us <img class="icon" src="./resources/images/instagram.png"></a></li>
        </ul>
      </nav>
      <nav class="mobile">
        <ul>
          <li><a href="#"><img src="./resources/images/ic-logo.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-product-detail.svg"></a></li>
          <li><a href="#"><img src="./resources/images/ic-about-us.svg"></a></li>
          <li><a href="#" class="button">Join us</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content -->
  <div class="main-content">

    <!-- Sign Up Section -->
    <div id="sign-up-section" class="banner">
      <div id="sign-up-cta">
        <div class="content center">
          <div class="header">
            <h2 class="cursive">Instant</h2>
            <h1 class="striking">FORMAT CAMERA</h1>
          </div>
          <div class="email">
            <span>
              Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
            </span>
            <div class="button">Join the waiting list</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Features Section -->
    <div id="features-section">
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="resources/images/feature-1.png" />
          </div>
          <div class="content">
            <h2>Advanced, automatic, instant</h2>
            <h3>Shutter speed, apperture and flash output adjust automatically</h3>
          </div>
        </div>
      </div>
      <div class="feature">
        <div class="center">
          <div class="image-container">
            <img src="resources/images/feature-2.png" />
          </div>
          <div class="content">
            <h2>Beautifully crafted inside-out</h2>
            <h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
          </div>
        </div>
      </div>
    </div>

    <!-- Filters Section -->
    <div id="filters-section">
      <div class="content center">
        <h2>Over 20+ filters to choose from</h2>
        <h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
      </div>
      <div class="images-container">
        <div class="image-container">
          <img src="./resources/images/filter-1.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-2.png" />
        </div>
        <div class="image-container">
          <img src="./resources/images/filter-3.png" />
        </div>
        <div class="image-container extra">
          <img src="./resources/images/filter-4.png" />
        </div>
      </div>
    </div>
    
    <div id="quotes-section">
      <div class="content center">
        <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
        <img class="quote-citation" src="./resources/images/photography-logo.png" />
      </div>
    </div>

      <!-- footer -->
      
    <footer>
      <div class="content">
        <span class="copyright">© 2016  Fotomatic, All Rights Reserved</span>
        <span class="location">Designed in NYC</span>
      </div>
    </footer>

  </div>
</body>
</html>


/* Universal Styles */

html {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
  }

  footer .content {
    color: white;
    display: flex;
    font-size: 0.75;
    padding: 1.5rem 2rem;
  }
Tags:

2

Answers


  1. 0 
    .content {
  font-size: 0.75rem; /* Add "rem" as the unit */
}

.quote {
  font-size: 12px; /* Add "px" as the unit */
}
    Login or Signup to reply.
  2. 0

    the font size should update correctly for the .content class in the footer and the quote element in the quotes section. You can adjust the values (e.g., 1.875rem, 1.5rem, etc.) to suit your design preferences.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search