Why doesn't the number of rows increase when scaling?

J

Juzzeppe2019-11-03 18:25:21

Typesetting

Juzzeppe, 2019-11-03 18:25:21

When scaling, the page simply decreases in size, but it is necessary that the font size does not change, but simply the number of lines increases. Please explain simply, otherwise this is only the first independent layout.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,400i,600,700&display=swap" rel="stylesheet">
  
  <title>Cuda</title>
</head>

<body>

<!-- Header -->

<header class="header">
  <div class="container">
    <div class="header__inner">
      <div class="header__logo">
        <img src="img/logo.png" alt="Cuda">
      </div>
      <div class="nav">
        <a class="nav__link" href="#">Home</a>
        <a class="nav__link" href="#">About</a>
        <a class="nav__link" href="#">Work</a>
        <a class="nav__link" href="#">Blog</a>
        <a class="nav__link" href="#">Contact</a>
      </div>
    </div>
  </div>
</header>

<!-- Welcome -->

<div class="welcome">
  <div class="container">
    <div class="welcome__inner">
      <h1 class="welcome__title">Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
      <a href="#" class="btn btn-orange">Work with us!</a>
    </div>
  </div>
</div>

</body>
</html>

body{
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
  font-size: 40px;
  color: #fff;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

*,
*:before,
*:after{
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{
  margin: 0;
}

p{
  margin: 0;
}

/* Container */

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Buttons
===================== */

.btn{
  display: inline-block;
  text-align: centers;
  vertical-align: top;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;

  border-radius: 4px;
  padding: 25px 80px;
  transition: 0.2s;
  border: 0;
}

.btn-orange{
  background-color: #eb7d4b;
  box-shadow: 0 4px 1px 0 #c86a40;
}

.btn-orange:hover{
  padding: 24px 79px;
  box-shadow: 0 0 0 0;
}

/* Header
===================== */

.header{
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  background-color: #87509c;
}

.header__inner{
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
  align-items: center;
}

.header__logo{
  display: flex;
}

/* Nav
=====================*/

.nav{
  display: flex;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

.nav__link{
  color: #fff;
  text-decoration: none;
  transition: 0.1s;
  margin-left: 23px;
  padding: 7px 17px;
}

.nav__link:hover{
  padding: 7px 17px;
  border-radius: 4px;
  background-color: #643a79;
}

.nav__link:first-child{
  margin-left: 0;
}

/* Welcome
=======================*/

.welcome{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 600px;
  padding-top: 100px;
  background-color: #87509c;
  text-align: center;	
  background-size: cover;
}

.welcome__inner{
  width: 100%;
  max-width: 915px;
  margin: 0 auto;
  text-align: center;
}

.welcome__title{
  
  font-size: 42.16px;
  font-weight: 700;
  line-height: 48.82px;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Dozmorov, 2019-11-04
@Juzzeppe

You can read this, but it's easy to google :(
https://developer.mozilla.org/en/docs/Mozilla/Mobi...