I've just started a project and so far I've added a header and text. I've gotten the header to resize correctly but I'm struggling to get the text and subtitle to do so.
I would like the text to resize smoothly but not sure how to go about doing this. I attempted using media queries but it's not really effective. Not really sure how to go about fixing this, any help will be greatly appreciated.
Codepen: https://codepen.io/Ayanfe/pen/oNoqoaR
HTML
<div >
<div data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div >Ayanfe Sanusi</div>
<hr >
<p >ILLUSTRATOR & CODER</p>
</div>
<div ></div>
</div>
CSS
.container {
position: absolute;
transform: translate(-50%, -50%);
margin-top: 50%;
left: 50%;
width: 100%;
}
.glitch, .glow {
color: #dfbfbf;
position: absolute;
font-size: 12rem;
animation: glitch 5s 5s infinite;
font-family: "Oswald", sans-serif;
font-style: italic;
font-weight: 200px;
margin-top: -28.5%;
left: 6%;
width: 100%;
text-size-adjust: auto;
}
.glitch::before, .glow::before {
content: attr(data-text);
position: absolute;
left: 0;
text-shadow: -8px 0 magenta;
background: none;
overflow: hidden;
top: 0;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
.glitch::after, .glow::after {
content: attr(data-text);
position: absolute;
left: 0px;
text-shadow: -5px 0 lightgreen;
background: none;
overflow: hidden;
top: 0;
animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
@keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
position: relative;
color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-top: -12.5%;
left: 7%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
position: relative;
margin-top: -0.6%;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}
CodePudding user response：
rem is a static size for the font based on the html style for the font. For example, if the html font size is set to 18px setting a fonts size for an element to 2rem will result in a font with 36px size (regardless of the page width).
In order to achieve what you want you should use vw which is setting the size based on the view width, setting the title to 10.35vw and the subtitle to 0.85vw should do the trick
CodePudding user response：
HTML
<div class=nav>
<header>
<a href="#" >[Ayanfe Sanusi]</a>
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</div>
<div >
<div data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
<div >
<div ></div>
<p >ILLUSTRATOR & CODER</p>
</div>
<div ></div>
</div>
CSS
@font-face {
font-family: 'montsserat';
src: url(fonts/Montserrat-SemiBold.ttf);
font-weight: 100;
font-style: SemiBold;
}
@font-face {
font-family: 'montsseratR';
src: url(fonts/Montserrat-Regular.ttf);
font-weight: 100;
font-style: Regular;
}
@font-face {
font-family: 'montsseratM';
src: url(fonts/Montserrat-Medium.ttf);
font-weight: 100;
font-style: Regular;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-image: linear-gradient(to right, #0c0427, #0d0427, #0d0427, #0e0327, #0e0327, #11082f, #130c36, #160e3e, #1f1150, #2a1463, #371575, #451488);
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
min-height: 100vh;
overscroll-behavior: none;
-webkit-animation: fadeIn 2s;
animation: fadeIn 2s;
animation-delay: 0s;
overflow-x: hidden;
cursor: url(Cursors/3.png), auto;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Montserrat', sans-serif;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
.logo {
position: relative;
left: -50px;
letter-spacing: 1px;
cursor: url(Cursors/3.png), auto;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
.logo:hover{
pointer-events: none;
border: none;
box-shadow: none;
background: transparent;
cursor: url(Cursors/3.png), auto;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
font-family: montsseratR;
font-size: 0.9rem;
text-transform: none;
cursor: url(Cursors/3.png), auto;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
text-transform: none;
position: sticky;
opacity: 0.5;
text-transform: uppercase;
cursor: url(Cursors/3.png), auto;
}
header ul li a.active {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
cursor: url(Cursors/3.png), auto;
}
header ul li a:hover {
color: #fff;
opacity: 1;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
position: sticky;
border: none;
box-shadow: none;
transition-delay: 0s;
text-transform: uppercase;
z-index: 20000;
cursor: url(Cursors/3.png), auto;
}
.container {
display: flex;
flex-direction: column;
margin-top: 15rem;
margin-left: 5%;
width: 100%;
margin-bottom: 5%;
}
.glitch {
color: #dfbfbf;
font-size: 9rem;
font-family: "Oswald", sans-serif;
font-style: italic;
text-shadow: -5px 0 lightgreen, -8px 0 magenta;
animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
margin-left: 2%;
}
@keyframes glitch {
1% {
transform: rotateX(10deg) skewX(90deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}
.sub-container{
display: flex;
flex-direction: row;
}
.scanlines {
overflow: hidden;
mix-blend-mode: difference;
}
.scanlines::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: repeating-linear-gradient(to bottom, transparent 0%,
rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
animation: fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 2%);
}
}
.solid {
width: 50%;
margin-top: 0.5rem;
height: 1.5px;
background-color: rgba(165, 141, 141, 1);
opacity: 0.3;
margin-left: 3%;
margin-right: 1.5%;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-weight: 100;
font-size: 1rem;
color: rgba(165, 141, 141, 1);
text-transform: uppercase;
letter-spacing: 1em;
right: -58%;
animation: glitch-2 5s 5.02s infinite;
}
@keyframes glitch-2 {
1% {
transform: rotateX(10deg) skewX(70deg);
}
2% {
transform: rotateX(0deg) skewX(0deg);
}
}