Different font sizes inside same div

DV1

Joined
May 22, 2022
Messages
6
Reaction score
0
This for a forum I'm working on.

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

Code:
<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:

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

And it gives this:

forumname1.png



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

forumname2.png


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.
 
Joined
Jul 4, 2023
Messages
406
Reaction score
47
You need to be more specific about which html element you want to change the font size for.

1. [ full code on-line ]
HTML:
<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>
CSS:
.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 ]
HTML:
<!--
  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>
CSS:
.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

Joined
May 22, 2022
Messages
6
Reaction score
0
@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:

forumname-a.png


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


forumname-b.png


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.


forumname-c.png


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.

forumname-d.png


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
 

Attachments

  • navbar_header.txt
    9.8 KB · Views: 11

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,818
Messages
2,569,727
Members
45,661
Latest member
NadineBour

Latest Threads

Top