Different font sizes inside same div

[DV1]

This for a forum I'm working on.

So I have placed the following in navbar_header.html of the templates:

<div class="forumname">
    <div class="inner"><span class="corners-top"><span></span></span>

    <ul class="linklist navlinks">
        <li>Forum Name</li>                
    </ul>
            
    <ul class="linklist leftside">
        <li><a href="link" accesskey="h">Link 1</a></li>
        <li><a href="link" accesskey="h">Link 2</a></li>
        <li><a href="link" accesskey="h">Link 3</a></li>
        <li><a href="link" accesskey="h">Link 4</a></li>
            </li>
        </ul>            

            <span class="corners-bottom"><span></span></span></div>
        </div>
        <br />

Along with that is the css:

.forumname{ font-family: sans-serif;
font-size: 1.5em;
color:blue;
}

And it gives this:

So far so good. But of course if I change the font-size in the css I get this:

I want the name larger but not the links. I tried different combinations of ul and li in the css but nothing doing. I thought an extra div but that would space it out vertically.

Probably easy as can be but just not catching it.

Thanks for any suggestions.

 

[VBService]

You need to be more specific about which html element you want to change the font size for.

1. [ full code on-line ]

<div class="forumname">
  <div class="inner">
    <span class="corners-top"><span></span></span>

    <ul class="linklist navlinks">
      <li>Forum Name</li>               
    </ul>

    <ul class="linklist leftside">
      <li><a href="link" accesskey="h">Link 1</a></li>
      <li><a href="link" accesskey="h">Link 2</a></li>
      <li><a href="link" accesskey="h">Link 3</a></li>
      <li><a href="link" accesskey="h">Link 4</a></li>
    </ul>           

    <span class="corners-bottom"><span></span></span>
  </div>
</div>

.forumname {
  /* 1rem ~ 16px  - why rem not px, rem unit is more scalable */
  /* in this place is a base unit for all tags inside .forumname */
  /* it means 1rem is 100% */
  font: 500 1rem/1 system-ui, monospace;
}
.forumname p {
  margin: 2rem 2.5rem;
}
.forumname ul {
  list-style: none;
}
.forumname a {
  text-decoration: none;
}
.forumname .navlinks {
  font-size: 130%; /* 1rem (100%) + 30% */
}
.forumname .leftside {
  display: flex;
  gap: 1rem;
  font-size: 80%; /* even can be less: 1rem (100%) - 20% */
}

2. or just set strictly [ full code on-line ]

<!--
  https://www.thecodingforums.com/threads/different-font-sizes-inside-same-div.975492/
-->

<div class="forumname">
  <div class="inner">
    <span class="corners-top"><span></span></span>

    <ul class="linklist navlinks">
      <li>Forum Name</li>               
    </ul>

    <ul class="linklist leftside">
      <li><a href="link" accesskey="h">Link 1</a></li>
      <li><a href="link" accesskey="h">Link 2</a></li>
      <li><a href="link" accesskey="h">Link 3</a></li>
      <li><a href="link" accesskey="h">Link 4</a></li>
    </ul>           

    <span class="corners-bottom"><span></span></span>

    <p>
      Lorem ipsum in normal size 1rem (100%) ~ 16px
    </p>
  </div>
</div>

.forumname {
  /* 1rem ~ 16px  - why rem not px, rem unit is more scalable */
  /* in this place is a base unit for all tags inside .forumname */
  font: 500 1rem/1 system-ui, monospace;
}
.forumname p {
  margin: 2rem 2.5rem;
}
.forumname ul {
  list-style: none;
}
.forumname a {
  text-decoration: none;
}
.forumname .navlinks {
  font-size: 1.4rem;
}
.forumname .leftside {
  display: flex;
  gap: 1rem;
  font-size: .75rem;
}

 

[DV1]

@VBService

Thank you for the information. I used some of it and it worked fine. I'm definitely going to save all the info as reference in similar coding situations.

Here are some images. Description below them:

The forum name and the links show well. After this image I reduced the size of the name. By the way, used rem.

To try one of the links I used Coding Forums as you can see. On full screen this looks good and one can see where the rest of the links would extend. But there's an issue here and it's in the next image.

The issue here is mobile size and it showing a menu for the links (red arrow). For starters, it's too close to the other menu icon below it (which is for other features of the forum) and besides the drop down is small. What I'd like is shown in the next image.

The above is from an older forum and the 'Current' titles were located under the 'Board index' shown in the previous 3 images. ('Spring' refers to image in banner)

At mobile size you can see that rather than a menu icon the titles simply shuffle under each other whereas on desktop size they extend with maybe one shuffling under. This is far better in terms of links readily seen. Note that I would be giving it a different line-height for accurate touch-screen use.

So, it's basically removing the menu icon in favor of the text links as show above.

I include here the full navbar_header.html (as Txt. since html is not allowed as attachment) wherein the section for the forumname (shown in my opening post) is located at the beginning. I'm not sure if it's the one necessary to address this.

Thanks for the help and any suggestions you may have re removing menu icon.

Daniel