Post Timeline: Connector Icon Size

Hello @wpgeek74,

Thanks for writing to us.

You can adjust by adding CSS in the Additional CSS section:

.uagb-block-2f8b02d6-7a32-48db-8634-d75fb0eeb84b.uagb-timeline__outer-wrap svg {
width: 55px;
}

Regards.
Judith.

thanks judith ??

this I did, unfortunately the part after uagb-block and before uagb-timeline will change randomly with each reload of the site

@judith0 What can I do?

Hi @wpgeek74

If the class name changes, you can use a CSS wildcard selector to help target it.

Try something like:

[class^="uagb-block-"].uagb-timeline__outer-wrap svg {
  width: 55px;
}

or maybe just this will do it:

.uagb-timeline__outer-wrap svg {
width: 55px;
}

Hope this helped out!

hi @aakash8 thanks for your help. I tried both… no change

Hi @wpgeek74

Sorry about that, I was writing the last rules from mobile and without testing.

Try these rules instead:

/* Increase the size of the circle containing the icon */
.uagb-timeline__marker {
    min-width: 50px !important;
    min-height: 50px !important;
}

/* Increase the size of the icon itself */
.uagb-timeline__marker > svg {
    width: 30px !important;
}

Working on my end, looks like this: https://i.imgur.com/aW8wGtl.pngHope this helped.

not working ?? 30px is the max I can set in the plugin… I want to change the icon to a bigger size… so I also tried this:

/* Increase the size of the circle containing the icon */
.uagb-timeline__marker {
   min-width: 55px !important;
   min-height: 55px !important;
}

/* Increase the size of the icon itself */
.uagb-timeline__marker > svg {
   width: 50px !important;
}

• This reply was modified 2 years, 6 months ago by wpgeek74.

I increased the size of the circle to 90px, this is working now
increasing the icon itself to 80 has no effect, it sticks at 30px, even if I change it to 80px

• This reply was modified 2 years, 6 months ago by wpgeek74.

@wpgeek74 If you can link to the page with an example of your timeline, I can provide more accurate CSS rules.

thanks @aakash8
I do not want to post the link here public. how can I sent the link to you?

I do not know why… but it is working ??

/* Increase the size of the circle containing the icon */
.uagb-timeline__marker {
   min-width: 70px !important;
   min-height: 70px !important;
}

/* Increase the size of the icon itself */
.uagb-timeline__marker > svg {
   width: 50px !important;
}

THANKS SO MUCH FOR YOUR HELP !!!

Hello @wpgeek74,

You are welcome. So I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

Thank you!