How to adjust size of an icon link widget on Service Portal?

[Edwin Fuller]

Below are 4 icon link widgets. How and where can I fix the size so that they are all equally the same size?

[Mark Roethof]

Hi there,

On the Page CSS, you could add CSS for these Icon links. CSS like a height: 100px; or something. 

For example, the icon link is actually div.iconlink:

So on the Page CSS you could add something like:

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark

---

LinkedIn

[Brandon Barret1]

Hi again Edwin, this is actually kind of interesting. Is this the same css code you posted on the other question? It looks like someone may have inadvertently set the height to 75% on that third icon box, or it is a bootstrap glitch perhaps. Is there a media query targeting it or anything? 

I would try setting height:100% for that container to be sure it is filling it. Maybe in the instance in page editor options height:100% !important; so it overrides any other css styling in the hierarchy. Interesting. Can you post a screenshot of the specific css or instance options for that box? Are you hardcoding height in in pixels? I use percentages, just for ease of resizing and responsiveness, which is why I noted 100% above. 

[Edwin Fuller]

Hi, when I make the below update it shifts the something is broken section down instead of actually changing the size of the ConnectUs widget

[Mark Roethof · Accepted solution]

Have you verified that those Icon links have the "div.iconlink" class? Like in my image?

Looking at your comment and your new image, might it be that "Something is broken" and "Need something" are also Icon links? This would interfere if these have the same class unfortunately.

An other option would be, edit each Icon link Instance option, add a "Bootstrap class name":

Then, add this to the Page specific CSS.

This would change the Icon links, see below example (not pretty, but just an example)

If my answer helped you in any way, please then mark it as helpful.

Kind regards,
Mark

---

LinkedIn