Custom CSS question

  • Resolved ewingworks

    (@ewingworks)


    7 years, 4 months ago

    [ Moderator note: moved to Fixing WordPress. Please do not use Developing with WordPress for these topics. ]

    I am trying to adjust the size of a header so it works better on mobile. I want to make it smaller. I am not a coder, but I think I can do this in the css or something. style sheet? Can someone tell me where (like: css style sheet, etc.) to change this and what the code to do so should be?

    It is set to h1 and i want to make it either its own size or set to h2:

    It is this line of code in the inspector:

    <h1 class="page-title">Greenville</h1>

    This is the full section of code below:


    <div id="”page”" class="”hfeed">
    Skip to content
    <header id="”masthead”" class="”site-header”" role="”banner”">
    <div class="”hero”">
    <div class="”hero-inner”">
    <div class="”page-title-container”">
    <header class="”page-header”">
    <h1 class="”page-title”">Greenville</h1>
    </header>

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to a page on your site where we can see this. Thanks.

    Thread Starter ewingworks

    (@ewingworks)

    It is a adult club so if that is an issue sorry, I do a lot of nightclub and restaurant work. Link NSFW

    when you look at this page on mobile the greenville word breaks the last letter to a new line.

    [Moderator note: Such links are no problem as long as your link is clearly labeled NSFW – ftfy]

    • This reply was modified 7 years, 4 months ago by bcworkz. Reason: add NSFW
    Moderator bcworkz

    (@bcworkz)

    Try adding this to the Additional CSS area of the customizer:

    @media only screen and (max-width: 40.063em) {
  h1 { font-size: 2em; }
}

    Adjust the numbers as you like. 40.063em is your theme’s normal breakpoint where mobile styling is applied, the other is 61.063em. It’s good to follow the same breaks, but not required. This will apply to all mobile h1 styles on the site, not just GREENVILLE. The style can be more specific if needed by adding other container classes in front of h1. For example, adding .page-header will only affect h1s in page headers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Custom CSS question’ is closed to new replies.