In a WordPress twenty eleven theme. I want to change the size of headings When I wrap my headings around h1 and h2 tags as follows
<h1>My h1 heading </h1>
<h2> My h2 heading </h2>
The font size of heading in the theme I am using is almost same as content's font except that they are bold. So my headings are not quite prominent.
I guess I would need to change something in the CSS file. Please advise what exactly in need to put in.
On
If you only change the font size, the text might intersect on smaller device types.
<style>
.heading-1{
font-size: 350%!important;
}
</style>
<h1 class="heading-1">
Get in Touch
</h1>
To make it responsive, consider tweaking the line height too.
<style>
.heading-1{
font-size: 350%!important;
line-height: 120%!important;
}
</style>
<h1 class="heading-1">
Get in Touch
</h1>
On
If you want to change a header specifically this is a much easier solution
<style>
h1.increase {
font-size: 15px;
}
</style>
<h1 class="increase">Header</h1>
You can quickly achieve using Bootstrap CSS.
<!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>Larger Heading</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
</main>
</body>
</html>
Note that after color you can use a word (e.g.
white), a hex code (e.g.#fff) or RGB (e.g.rgb(255,255,255)) or RGBA (e.g.rgba(255,255,255,0.3)).