Child theme css overrides media queries

  • I have set upp the simplest of child themes for twenty thirteen.
    It consists of a style.css with a single rule to change the left padding to 59px instead of 60px for the content.

    /*
Theme Name:     Test
Theme URI:
Description:    Test
Author:         Test
Author URI:
Template:       twentythirteen
Version:        0.1
*/

@import url('../twentythirteen/style.css');

.sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
	padding: 0 376px 0 59px;
}

    This works but when resizing viewport to 768 it seems this rule overrides the media querie for max-width: 999px, which is:

    padding-left: 0;
padding-right: 0;

    The result is a very smal column of content as a result of padding-values meant for desktop width.

    Am I doing something wrong?

Viewing 1 replies (of 1 total)
  • Thread Starter Leah

    (@gezan)

    If I use:

    padding-left: 59px;

    it seems to work. Why is that?

    I mean, using:

    padding: 0 376px 0 59px;

    is how the original rule is written. And

    padding-left: 59px;

    is how the media querie is written. I can’t remember I have ever needed to look up how media queries is written for it not to be overridden?

Viewing 1 replies (of 1 total)
  • The topic ‘Child theme css overrides media queries’ is closed to new replies.