Support » Plugin: WP Plugin Info Card » a little css problem

  • Resolved Li-An

    (@li-an)


    Hello I have a little CSS glitch with my new theme. Don’t now if you can help.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Brice Capobianco

    (@brikou)

    Hi,
    Since you altered the default template and add your own CSS (which is compressed), its hard to say, but I think that making the following changes will help:

    CHANGE

    .wp-pic .wp-pic-bar a, .wp-pic .wp-pic-bar span {
        float: left;
        display: inline-block;
        position: relative;
        width: 33.33%;
        padding: 42px 0 10px;
        color: #fff!important;
        font-weight: 700;
        font-size: 12px;
        line-height: 17px;
        text-align: center;
    }

    TO

    .wp-pic .wp-pic-bar a {
        float: left;
        display: inline-block;
        position: relative;
        width: 33.33%;
        padding: 42px 0 10px;
        color: #fff!important;
        font-weight: 700;
        font-size: 12px;
        line-height: 17px;
        text-align: center;
    }

    Best,
    Brice

    I desactivated Autoptimize and added your code without changings. I don’t think I changed the CSS for your extension, I just modified the large template. But I may be wrong – I just cannot see where it could be changed.

    Plugin Author Brice Capobianco

    (@brikou)

    Humm…That’s strange…
    You did not change the CSS but changed the template by adding new dom elements <span>, that’s why it breaks.

    Try to add this :

    .wp-pic-large .wp-pic .wp-pic-bar span {
        float: none;
        padding: 0;
        display: inline;
    }
    .wp-pic-large .wp-pic .wp-pic-bar span:after {
        background: transparent;
    }

    Best

    Thanks for your help. I decided to modify the template so there is no more glitch.

    I have still a WP and I cannot see where it comes from.

    I found the reason : https://wordpress.org/plugins/wp-typography/ broke the CSS by adding a new class interacting with different plugins. I contacted the developer.

    I’ve just had a look and in this case, the styles are not specific enough to be robust:

    .wp-pic .wp-pic-bar a, .wp-pic .wp-pic-bar span should be changed to .wp-pic .wp-pic-bar > a, .wp-pic .wp-pic-bar > span (and also the same selectors with pseudo-elements like :before) for additional specificity.

    (The reported problem was only with the span tag, but you should be targeting only direct child elements of .wp-pic-bar and not every a or span further down the line.)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘a little css problem’ is closed to new replies.