I have problem with scaling. Text is propably too big, everything works well on desktop site. Problems starts when we start phone site version. Now, text is bigger than site, also when I open my navigation bar, text is on the text. This makes that navigation bar is useless and we cant use it. I need help to get this text smaller when width is smaller than 500px or just when we are on mobile phone. If some more informations needed, tell me :) Appreciate that.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exchange Dynasty</title>
<link rel="stylesheet" href="aboutus.css" />
</head>
<body>
<section class="showcase">
<header>
<a href="/">
<h2 class="logo">ITSupportKotlina</h2>
</a>
<div class="toggle"></div>
</header>
<div class="overlay"></div>
<div class="text">
<br /><br />
<center>
<h2>O nas!</h2>
</center>
<div class="container">
<div class="row">
<div class="col-2">
<p>
Proponujemy kompleksową obsługę informatyczną dla mikro, małych
i średnich przedsiębiorstw, szkół, placówek medycznych i
instytuacji. Umożliwiamy podpisanie umowy w ramach miesięcznego
abonamentu lub zamówienia jednorazowej usługi w przypadku
potrzeby skorzystania z naszej pomocy.
</p>
</div>
<img src="10.png" width="700px" />
<div class="col-2">
<p>
Proponujemy kompleksową obsługę informatyczną dla mikro, małych
i średnich przedsiębiorstw, szkół, placówek medycznych i
instytuacji. Umożliwiamy podpisanie umowy w ramach miesięcznego
abonamentu lub zamówienia jednorazowej usługi w przypadku
potrzeby skorzystania z naszej pomocy.
</p>
</div>
<img src="10.png" width="300px" />
</div>
</div>
</div>
</section>
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">Terms</a></li>
<li><a href="offer.html">Pricing</a></li>
<li><a href="contact.html">Ticket</a></li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
header .logo {
color: #000;
text-transform: uppercase;
cursor: pointer;
}
header a {
text-decoration: none;
}
.toggle {
position: relative;
width: 60px;
height: 60px;
background: url(https://i.ibb.co/C5dP44V/menu1.png);
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
.toggle.active {
background: url(https://i.ibb.co/CH3g5YL/close1.png);
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
transition: 0.5s;
z-index: 2;
}
.showcase.active {
right: 300px;
}
.menu {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.menu ul {
position: relative;
}
.menu ul li {
list-style: none;
}
.menu ul li a {
text-decoration: none;
font-size: 24px;
color: #111;
}
.menu ul li a:hover {
color: #03a9f4;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
mix-blend-mode: overlay;
}
.text {
position: relative;
z-index: 10;
}
.text h2 {
font-size: 3em;
font-weight: 800;
color: #000;
line-height: 1em;
text-transform: uppercase;
}
.text h3 {
font-size: 2em;
font-weight: 700;
color: #000;
line-height: 1em;
text-transform: uppercase;
}
.text p {
font-size: 0.9em;
color: #000;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
}
.text a {
display: inline-block;
font-size: 1em;
background: #000;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #fff;
letter-spacing: 2px;
transition: 0.2s;
}
.text a:hover {
letter-spacing: 6px;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
/* justify-content: space-around; */
max-width: 300px;
}
.col-2 {
flex-basis: 50%;
MAX-width: 300px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
@media (min-width: 919px) {
.showcase,
.showcase header {
padding: 40px;
}
.text h2 {
font-size: 1em;
}
.text h3 {
font-size: 1em;
}
}
Im looking for someone that could help me with configuration of this code. I would like to get finally responsive page that can be displayed on every device including scaling of text to every screen size.
