Override !important

  • Resolved editpo

    (@editpo)


    5 years, 10 months ago

    Hi
    I am trying to override

    @media handheld, screen and (max-width: 600px) {
    /*———————————————————-
    Starting at this size, the captions get in the way of the
    thumbnail images, so we don’t show them.
    ———————————————————-*/
    .mg-image-tiles .mg-thumbs .caption.above,
    .mg-image-tiles .mg-thumbs .caption.below,
    .mg-image-tiles .mg-thumbs .caption.bottom {
    display: none !important;
    }

    to show the captions. If I change display:none !important to display:block in dev console it how I want it But when i add the css to my theme the css in image-tiles.css always overrides my custom css. Even manually adding it just before </head> doesnt work.
    If i edit the original ccs file it works but dont want to do that as it will most likely be overwritten next update.
    Any way around it?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author AlanP57

    (@alanp57)

    5 years, 10 months ago

    A more definite CSS selector should override a general one, so include the gallery id. For example,

    #maxgallery-15 .mg-image-tiles .mg-thumbs .caption.above,
#maxgallery-15 .mg-image-tiles .mg-thumbs .caption.below,
#maxgallery-15 .mg-image-tiles .mg-thumbs .caption.bottom
 {
  display: block;
}
    • This reply was modified 5 years, 10 months ago by AlanP57.
    Thread Starter editpo

    (@editpo)

    5 years, 10 months ago

    Thanks for the reply.
    That didn’t work but #max-gallery-15 p.caption.below {display:block !important;} works ok but obviously only for that gallery.
    What about all galleries at once? Is that possible?

    Plugin Author AlanP57

    (@alanp57)

    5 years, 10 months ago

    You need to use the actual gallery ID in the source code for a particular gallery, not the one I used for an example.

    Thread Starter editpo

    (@editpo)

    5 years, 10 months ago

    Yes I know, I did(4155)

    Thread Starter editpo

    (@editpo)

    5 years, 10 months ago

    Worked it out.
    Created my own css file and added in Advanced.
    Overrides OK.

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

The topic ‘Override !important’ is closed to new replies.