Code to widen Job Board Pop-up

Ask the Community Customization
,
1

Hello!

I’m looking for a css code that will widen the pop-up on our job board - even make it a floating box instead of a full reem from top to bottom. See attached.

Screenshot 2025-05-14 at 14.03.11
Screenshot 2025-05-14 at 14.03.111920×834 120 KB

2 Likes
3

Hi there, @Billie_Meredith :waving_hand:

Could you please send me a link to the page, where your widget is installed?

1 Like
4

Hi Max see the link here: Opportunities — Young Identity

2 Likes
5

Thanks! Here is the code:

[class*="Popup__PopupContent-sc"] {
  width: 1000px !important;
}

Try it out and let me if it helped :slightly_smiling_face:

1 Like
6

Brilliant! - Thanks :folded_hands:t4:

2 Likes
7

Great, you’re welcome @Billie_Meredith!

In the meantime, we’d like to invite you to participate in our new contest, where you can win a 6-month extension for your subscription - May Contest: Create a Caption for Our Photo and Win 6 Months FREE! :rocket:

Check the details and join in :wink:

2 Likes
8

Hey!

I’m back on this and wanted to ask if theres a way for the pop up to show top and bottom edges - similar to that of the portfolio or blog widget.

Portfolio

Blog
https://www.youngidentity.org/news?blogPost=echoes-of-origin

1 Like
9

Hi there, @Billie_Meredith :waving_hand:

Please try to use this code in the Custom CSS field on the Appearance tab of your widget’s settings and let me know if it helped :slightly_smiling_face:

@media (min-width: 768px) {
  [class*='Popup__PopupInner-sc'] {
    margin-top: 100px;
    max-height: none;
    height: auto;
  }
}

@media (max-width: 768px) {
  [class*='Popup__PopupInner-sc'] {
    padding: 0 !important;
  }
}
1 Like
10

Hi Max,

Thanks for getting back so quick.

This does provide a gap at the top which is brill, but for the longer posts it’s still sticking to the bottom still.

See here: Opportunities — Young Identity

1 Like
11

Sorry for the oversight! I’ve adjusted the code in your widget:

@media (min-width: 768px) {
  [class*='Popup__PopupInner-sc'] {
    margin: 100px 0;
    max-height: none;
    height: auto;
  }
}

@media (max-width: 768px) {
  [class*='Popup__PopupInner-sc'] {
    padding: 0 !important;
  }
}

Please check your website and let me know if you like the result :slightly_smiling_face:

1 Like
12

Thanks so much!

This is perfect and works great in conjunction with the previous code. Brilliant as always :star:

2 Likes
13

Perfect, you’re always welcome :wink: