Need Help Adjusting Width of Embedded FAQ Widget inside Popup

Ask the Community Customization
,
1

Dear Elfsight Team,

Hello! First of all, thank you for providing such wonderful widgets. I’ve been using your services with great satisfaction.

I’m currently using the Popup widget to display an HTML block that contains an embedded FAQ widget. However, I’ve noticed that the width of the FAQ widget appears too narrow within the popup, and I haven’t been able to figure out how to make it wider (maybe up to 100%).

I also noticed that regular buttons inside the popup expand fully when I set them to full width, but the HTML block containing the FAQ widget doesn’t behave the same way — it doesn’t stretch to fill the space, which makes the FAQ widget look confined.

Here are the relevant details:

  • Page where the widget is embedded: https://mental.place/810

  • Popup Widget ID: elfsight-app-649d691a-0153-48a5-a3ec-31bd6d4c61c1

  • FAQ Widget ID: elfsight-app-293828fb-4bf3-4ec8-ab35-b1d8eb6aa4c1

At the moment, this setup is only implemented for desktop (PC) view.

I would appreciate any guidance on how to adjust the FAQ widget’s width within the popup. Thank you in advance for your help!

Warm regards,
Joshua Kim

P.S.
I’d also like to remove the left and right padding (or margins) around the FAQ widget so that it fits the popup more fully.

2 Likes
3

Hi there, @user12542 :waving_hand:

To make the FAQ widget full width, please add this code to the Custom CSS field on the Settings tab of your Popup widget’s settings:

div:has([class*='elfsight-app-293828fb']) {
  width: 100%;
}

It’s impossible to remove the remaining paddings on the sides just for the FAQ block, but you can remove them for all elements of your popup. Here is the CSS code:

[class*='WidgetBackground__Wrapper-sc'] {
  padding: 20px 0px !important;
}

20px - vertical padding

0px - horizontal padding


Please give it a try and let me know if it worked :wink:

1 Like
4

Thank you so much! the first code worked perfectly!!

Is it still impossible that remove paddings on the sides of the FAQ widgets by adding custom css code in the FAQ widget, not in the popup widget?

1 Like
5

Do you mean to add a code to the FAQ widget’s settings that will remove the side paddings of the FAQ in the Popup widget? If this is the case, unfortunately, there is no way to do this.

If you have the FAQ widget installed somewhere without a popup and it also has paddings, please send me a link to the page, where it’s installed :slightly_smiling_face: