Annul parent CSS code without adding new code

  • Hi everyone,

    I recently stumbled upon a problem on my website that requires me to annul a parent css line without adding new code in the child css to override it (I’m using a modified Twenty Twelve theme).

    I’m trying to format the scyscraper ad banner on the right – I had to give it a margin-left of 105px to not mask parts of my sidebar. This however caused the banner image to shrink:

    Screenshot

    Firebug showed be that this is a problem caused by a line in my parent css setting the max width of the object to 100%:

    embed, iframe, object, video {
    max-width: 100%;
}

    If I disable the max-width, it works just fine.

    I bypassed the problem by adding a line to my child css setting the max-width to 300%, but I don’t know if that causes problem with different screen resolutions. The best way would be to just delete the line of code, but I’d like to not touch the parent files.

    Is there a way to just annul part of the parent css without directly deleting it?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Rafael

    (@jordh)

    I have now solved the problem by completely rearranging the site. It has a fixed width now, but that’s what works best with the banners.

    Anyway, I’m still curious if there’s a way to annull code fromt a parent css without directly editing it.

    a way to annull code fromt a parent css without directly editing it

    you always need to try and overwrite it
    – unless you don’t load the parent styleshheet with @import, but then you would need to copy the whole stylesheet into the child theme, and modify it there.

    example:
    the your banner container does have its own CSS class which you could use to add a more specific style like (untested):

    .container_skyscraper object { max-width: auto; }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Annul parent CSS code without adding new code’ is closed to new replies.