Problem with the appearance of pictograms + CSS to vary pictogram size

  • Resolved hravote

    (@hravote)


    7 months, 2 weeks ago

    Hello to the Qi Addons team, I hope you’re well.

    I have two concerns about a page on which I’d like to integrate your plugin called “Chronological presentation”.

    #1 is it possible to give me the line of CSS code to manage the size of the pictograms (.svg)? Please note that I need lines of code that allow me to vary the size of individual pictograms. Because I don’t understand why the first picto is bigger than the second and even bigger than the third… 

    + the icon seems to be enclosed in a circle that prevents it from being displayed completely, is it possible to remove this setting? Or replace it with a square frame, please?

    #2 when inserting my .svg from the media library to the plugin, my pictogram changes appearance, I don’t know why. Can you help me / give me the lines of CSS code so that the pictogram looks as it should?

    I’m attaching two screenshots to this request to show you the display problems. 

    I look forward to hearing from you! 

    Hugo

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

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

    (@qodeinteractive)

    Hi there,

    Could you please let us know where this svg icon is placed. Is it on the right side of the page you sent us or is it some other svg that you referred to.

    Thank you.

    Best,

    Qode

    Thread Starter hravote

    (@hravote)

    Hello,

    Thank you for your message.
    I’m not sure I understand your question, but the .SVG is placed in the “Chronological presentation” module, you’ll find a visual attached to this message that will surely help you.
    This layout is available in the page I sent you in my first message.

    I need the .svg to be displayed exactly as I created it.
    I need to be able to remove the circle enclosing the 3 pictograms in my module.
    I need to be able to vary the size of the pictograms individually.

    Sorry if I didn’t quite understand the question, I’ll try to give you all the info!

    Thanks a lot!
    Hugo

    Plugin Author Qode

    (@qodeinteractive)

    Hi there,

    Thank you.

    You can try to add this code to Appearance > Customize > Additional CSS:

    .qodef-timeline--vertical .qodef-e-item:first-child svg {
   width: .4em;
}

.qodef-timeline--vertical .qodef-e-item:nth-child(2) svg {
   width: .6em;
}

.qodef-timeline--vertical .qodef-e-item:nth-child(3) svg{
   width: .7em;
}

    and add different values to your svg’s

    We hope this helped.

    Best,

    Qode

    • This reply was modified 7 months, 2 weeks ago by Qode.
    Thread Starter hravote

    (@hravote)

    Hi,

    Thank you for your answer. It works even if we can’t grow the pictograms bigger than 10em..

    And when I put 10em (biggest size), the pictograms are always cuted by the cercle around them, you can see that is the screenshot attached with this message.

    The top and bottom pictograms are displayed incorrectly, I don’t know why, I’ve provided an example in the attached photo of the display problems with an “Expected” and “Reality”.

    Can you help me with the others problems I mentioned on my first and second messages please ?

    Thank you in advance.

    Hugo

    Plugin Author Qode

    (@qodeinteractive)

    Hi there,

    For the size of the svg you can try to add this code:

    .elementor-1320 .elementor-element.elementor-element-fd63961 .qodef-e-point-holder {
    font-size: 190px;
    }

    If we missed some of the questions, perhaps it is best practice to turn to our support team so they can check this in detail.

    Also please repeat the missed part so we can check this on our end. Usually uploading svg as they are made, they already have predefined styles, so please check your svg and how you created them.

    Please keep us updated.

    Best,

    Qode

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Problem with the appearance of pictograms + CSS to vary pictogram size’ is closed to new replies.