Info box > img CSS being set incorrectly

  • Resolved lyden

    (@lydenyardley)


    5 years, 5 months ago

    Hello team,

    More CSS issues inline with most of the tickets I’ve raised previously.

    Your default value for .uagb-ifb-imgicon-wrap .uagb-ifb-image-content img is ‘max-width: 100%;’, which is perfect. However, when resetting the width value in the block, a specific (unwanted) width and max-width value are being applied to the ID as so:

    #uagb-infobox-0cc49a73-e72b-47c6-9990-abfe0786dca0 .uagb-ifb-image-content > img {
    width: 120px;
    max-width: 120px;
}

    Steps to reproduce:

    1. Add ‘Info Box’ block to page
    2. Set image/icon to ‘image’ > add any image, size ‘medium’
    3. Select ‘reset’ and delete value in width field
    4. Save > View page

    My ‘medium’ image has a width of 300px, so unless otherwise specified in the info box block, it should inherit your default value of max-width: 100%, and be limited to 300px wide.

    Please can you fix this, it’s happening throughout your blocks… the only way I can override it is to set a custom CSS value with !important

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey @lydenyardley ,

    Thank you for reaching us out.

    You can add the 300 px value here. Like mentioned in the previous forum topic, this is an issue from Gutenberg end.

    I hope this clarifies your doubts.

    Regards,
    Vrunda Kansara

    Thread Starter lyden

    (@lydenyardley)

    Hi @brainstormteam,

    I don’t see how it can be anything to do with Gutenberg?

    You must have a piece of code that’s adding values against the ID selector. Surely, you can change this, so that if there is no value entered into the width field, you don’t apply a declaration to the ID selector?

    Also, your suggestion is no good for me, since if I specify 300px in your block, it will apply to width and max-width, which destroys the responsiveness of the image.

    Please advise if you’re able to fix this consistent CSS specificity issue. I would attempt to offer a fix myself if I were familiar with the backend.

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey @lydenyardley ,

    It is Gutenberg related since, blank values are not stored in the database, which is handled by Gutenberg.

    I would have suggested you keep the width value as null, but if you do so, the default 120px will be applied from the defaults.

    You can either overwrite the width using CSS or directly give 300px (any desired value) to the image.

    I totally understand your situation here. Adding !important is not ideal. So, I would ask my developer to see what could be done here for Info Box.

    Regards,
    Vrunda Kansara

    Thread Starter lyden

    (@lydenyardley)

    Hi again @brainstormteam,

    Rather than try to store blank values in the database, can you set some logic that if the value is wiped from your fields, that no CSS attribute is set at all against the ID?

    This way;

    • if a user does nothing, or wipes the values from the fields, they get your default class values
    • only if a user sets values, it assigns the CSS to the ID

    That makes most sense to me.

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey @lydenyardley

    We will surely come up with some solution to this.
    Thank you for sharing your logical views with us. We appreciate it.

    Regards,
    Vrunda Kansara

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    Hey @lydenyardley ,

    We have introduced a solution to this problem in Info Box for you. – https://cl.ly/d8272e5dafb5

    You can disable this and things will work for you.

    Regards,
    Vrunda Kansara

    Thread Starter lyden

    (@lydenyardley)

    Works perfectly! Thanks @brainstormteam

    Plugin Support Team Brainstorm Force

    (@brainstormteam)

    I am glad! ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Info box > img CSS being set incorrectly’ is closed to new replies.