Having some trouble adjusting the font size on my HTML webpage using CSS - for some reason, the "font-size" property isn't cooperating:
Below is the snippet of HTML code for my site:
And here's a brief look at the accompanying CSS code:
I've added an image of my actual website with text appearing much smaller than expected despite setting the font-size to 200px:
EDIT: No problem, here's the full code:
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title> Flexbox in HTML</title>
<link rel="stylesheet" href="flexbox.css">
</head>
<body>
<div class="outer">
<div class="inner">
<img src="/images/dog1.jpg"
<p>This is dog 1</p>
</div>
<div class="inner">
<img src="/images/dog2.jpg"
<p>This is dog 2</p>
</div>
<div class="inner">
<img src="/images/dog3.jpg"
<p>This is dog 3</p>
</div>
<div class="inner">
<img src="/images/dog4.jpg"
<p>This is dog 4</p>
</div>
</div>
</body>
</html>
CSS CODE:
.outer {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.inner img {
height:50vh;
}
p {
text-align:center;
font-size: 5000%;
}