Can't Override Twenty Thirteen @media

  • Resolved Joseph Lamkin

    (@joseph-lamkin)


    11 years, 3 months ago

    I am teaching myself CSS in building a child theme of Twenty Thirteen for our grade school. It is going well, but I am having trouble override the parent style for mobile width. Specifically, I would like to change the padding in the title and the hover in the menu. But when I try, it ignores the @media in my CSS. Any help would be greatly appreciated! Here is my test site: https://jillsbirthday.com

Viewing 7 replies - 1 through 7 (of 7 total)

  • Have you tried adding:

    !important;

    example:

    padding-top:10px!important;

    Thread Starter Joseph Lamkin

    (@joseph-lamkin)

    I did that on the advice of my brother, who knows a little more about this, but it had no impact.

    In your css you refer to

    .toggled-on .nav-menu li a:hover

    I checked and this is the css that is being used as far as I can tell.

    .toggled-on .nav-menu li a:hover,
	.toggled-on .nav-menu ul a:hover {
		background-color: #2d9945 !important;
		color: #fff;
	}
    Thread Starter Joseph Lamkin

    (@joseph-lamkin)

    If you collapse the window size down until the small menu is activated, you will see that the HOVER color reverts to the original orange of the Twenty Thirteen theme, not the green #2d9945 that I would like it to be, and that it uses in the standard drop menus.

    Found it:

    in you style.css you forgot to close a style rule. This means all css rules below are ignored.

    .widget a:hover {
	color: #2d9944;

    (line 245)

    It’s also a good idea to check your css with a css validation service like:

    https://jigsaw.w3.org/

    Thread Starter Joseph Lamkin

    (@joseph-lamkin)

    That did it! Thanks for spending the time and teaching me to fish! I’ll use jigsaw.w3.org from now on!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Can't Override Twenty Thirteen @media’ is closed to new replies.

Tags