Changing Site title size on mobile

Hi there.
Thanks for your wonderful support.
My site is rethinkingmemory.com on mobile the font is a little too big so it cuts off the text to read:
Rethinkin
g
Memory

I would want it to be smaller so that the word is not cut off and therefore the menu significantly larger.

I have the following extra CSS because I wanted the site description to be closer to the title and the menu farther appart from each other:

    /* Füge hier Dein eigenes CSS ein 
    The following code makes the hover menu larger so that all the text fits in it perfectly. Especially the "width" option is key here.
    */

    #masthead .main-navigation ul ul a {
        width: 230px;
    }

    #masthead .main-navigation ul ul li {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Abstand Maintitle
    */

    @media (max-width: 767px) {
        .site-title {
            font-size: 70px !important;
        }
    }

    .site-description {
        line-height: 1;
        margin-top: 2px;
    }

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 730px) {
      .site-branding > .site-title {
        font-size: 50px !important;
      }
    }

    @media only screen and (max-width: 520px) {
      .site-branding > .site-title {
        font-size: 25px !important;
      }
    }

Regards,
Kharis

Hi Kharis. As alwys thank you very much for your kind help!
Unfortunately that did not seem to do the trick. Somehow nothing changed. I thought maybe it was due to the cache so I tried another browser. Still the same. Is it maybe because of the other additional css and their order?
This is my entire additional css text from the backend:

/* Füge hier Dein eigenes CSS ein
The following code makes the hover menu larger so that all the text fits in it perfectly. Especially the “width” option is key here.
*/

#masthead .main-navigation ul ul a {
width: 230px;
}

#masthead .main-navigation ul ul li {
padding-top: 6px;
padding-bottom: 6px;
}

/* Title wird kleiner auf Mobilen Geräten angezeigt, damit der Text in einer Zeile gezeigt wird.
*/

@media only screen and (max-width: 730px) {
.site-branding > .site-title {
font-size: 50px !important;
}
}

@media only screen and (max-width: 520px) {
  .site-branding > .site-title {
    font-size: 25px !important;
  }
}

/* Abstand Maintitle*/

@media (max-width: 767px) {
.site-title {
font-size: 70px !important;
}
}

.site-description {
line-height: 1;
margin-top: 2px;
}

/* Einzelne Blogeinträge ohne Widget area rechts und zentriert zum besseren lesen

.site-main > .hentry {
border: none;
}
.site-content #primary.content-area {
width: 100%;
}

@media only screen and (min-width: 991px) {
  .single-post .site-main > * {
    width: 800px;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
}

*/

Hello there,

Try validating your custom CSS code with this tool. Ensure all valid and there’s no error found.

Regards,
Kharis

It found 3 parse errors.
And 2 unrecognized media only.
But I have no clue on what to do next. Sorry :frowning:

if I use this link: https://jigsaw.w3.org/css-validator/validator it validates everything perfectly. I am even more confused :frowning:

Oh! Now I feel stupid! I think I found the problem. It was a caching plugin that served the css per device the old way. Reset the cache and now it works :frowning:
Very sorry. Thanks for your great help!

No problem. You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis