Support » Theme: Twenty Nineteen » Modifying responsive heading sizes

  • Resolved billbennett

    (@billbennett)


    The responsive layout code for adjusting the size of the h1 and h2 headlines on a wide screen is:

    @media only screen and (min-width: 768px), all
    .entry-title, .not-found .page-title, .error-404 .page-title, .has-larger-font-size, h2 {
    font-size: 2.25em;
    }

    I can change this to 1.25em in INSPECT ELEMENT in the browser, it works as expected.

    However, if I copy the code into the additional CSS editor, it breaks. I get an error on the h2 part.

    I like to work this way to perfect the look before moving everything into a child theme css file.

    What am I doing wrong here?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Not sure where the ‘all’ text comes from but media queries should look like this

    @media only screen and (min-width: 768px) {
    	.entry-title, .not-found .page-title, .error-404 .page-title, .has-larger-font-size, h2 {
    		font-size: 2.25em;
    	}
    }

    Thanks. I should have known that… but because I cut and pasted the code from Inspect Element, I (dumbly) assumed it was perfectly formed but in some clever way I didn’t fully understand.

    That’s the lesson here… if code LOOKS wrong, it’s not always because the other coder was more clever than me…

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.