Hello and welcome to Stack Overflow! In order for us to assist you better, please provide a Minimal, Reproducible Example of the issue you are facing. Additionally, make sure to specify exactly what difficulties you are encountering. If you simply wish to create a .smallHeader row, you can use the following basic CSS:
.smallHeader {
font-size: small; /* smaller compared to 'medium' (default size is around 16px) */
line-height: 1.2; /* standard default value that also vertically centers text */
/* Increasing this value will add top/bottom space between lines of text or use 'padding' */
Refer to MDN: font-size,
MDN: line-height, and
MDN: padding for more information.
It's important to note that using `padding` for top/bottom spacing might be preferred when dealing with long texts as each wrapped line maintains the same `line-height` which may not always be desired. This ensures proper spacing around the block of text.
The provided CSS snippet gives an example demonstrating the difference between `line-height` and `padding`. To see the effect, run the snippet in 'Full page view' and resize your browser accordingly...
ul,li {
padding: 0; list-style-type: none /* override default styles */
}
ul {
margin: 0 /* ditto */
}
.smallHeader {
font-size: small;
line-height: 1.6;
/* eye-candy styling */
background-color: grey; color: white;
text-align: center;
}
li.menu-item {
display: inline;
/* eye-candy styling */
padding: 0 1em;
}
.bigHeader {
font-size: x-large;
padding: 1em 0;
/* eye-candy styling */
background-color: black; color: white;
text-align: center;
}
[class^="test"] { background-color: rgba(0,0,0,.1) }
.test-lh { line-height: 1.5em }
.test-pd { padding: 1.5em }
<header>
<div class="smallHeader">
<ul id="menu-small-menu" class="small_menu">
<li id="menu-item-10429" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10429">12 Royal Street California USA</li>
<li id="menu-item-6305" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6305">001-122-134-555</li>
<li id="menu-item-6211" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6211"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4c40415b4e4c5b6f4b40424e4641014c4042">[email protected]</a></li>
</ul>
</div>
<div class="bigHeader">extra large text</div>
</header>
<div class="test-lh">
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed....
</div>
<div class="test-pd">
<p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed...
</div>