Mini font on website embed

Bugs / Site Issues
1

I’m getting unusually small fonts for the conversation starters on my pickaxe embeds. I’ve also noticed they are different from the preview in that they don’t have an outline. I’ve extensively tried tweaking the customization parameters but with no success.

image
image726×622 47.4 KB

I found a temporary fix by brute forcing a font increase in all elements:

< style >
#deployment-abcde12345 * {
font-size: 2rem !important;
}
< /style >

but that is not a great solution as you can see here:

image
image1042×905 95.8 KB

Is this really a bug or am I missing something?

2

Hi! You can use the code below to customize your icebreakers for your Pickaxe embed. I’ve added comments so you can easily see which part controls colors, font size, spacing, etc. You can tweak anything you want to match your site’s style.

/* Main icebreaker container: background, border */
    .pxe-group.pxe-cursor-pointer.pxe-border {
      background: #fff8e1 !important;     /* Light yellow - change as needed */
      border-color: #cdb4fd !important;   /* Pastel purple - change as needed */
      border-radius: 3px !important;      /* Rounded corners */
      margin-bottom: 12px !important;     /* Space between icebreakers */
      transition: background 0.2s;
    }
    
    /* Icebreaker text: color, font, outline, size */
    .pxe-group.pxe-cursor-pointer.pxe-border p {
      color: #302b63 !important;           /* Deep purple text - change as needed */
      font-size: 1rem !important;       /* Change font size here */
      font-weight: 600 !important;         /* Bold font */
      padding: 6px 14px !important;        /* Padding inside the text box */
      background: transparent !important;  /* Keep background transparent for text */
      display: inline-block;
    }
    
    /* Optional: more spacing between conversation starters */
    .pxe-flex-col .pxe-group {
      margin-bottom: 14px !important;
    }

Please keep in mind that the DOM structure may change at any time. If any of the class names are updated, this code could stop working. If that happens, you can right-click the element and use Inspect Element in your browser to find the new classes and adjust your code.

Let me know if this helps or if you want to customize anything further!

1 Like