Modifying responsive heading sizes

  • Resolved billbennett

    (@billbennett)


    6 years ago

    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)
  • Jarret

    (@jarretc)

    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;
	}
}
    Thread Starter billbennett

    (@billbennett)

    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)
  • The topic ‘Modifying responsive heading sizes’ is closed to new replies.

Tags