What CSS can I use to change the size of my portfolio popups

Ask the Community Customization
1
  • Issue description:

I’m using the portfolio widget and it’s great, however, I’d like to make the popup on each post smaller/be able to customise the size, as it’s too large for my preference. Any help welcome!

  • Link to the page with the widget in question:
1 Like
3

Hi @Billie_Meredith and welcome to Community :wave:

Sure thing, we’ll be happy to help!

I’ve forwarded your request to our dev team. Please do not worry, we’ll keep you updated :slightly_smiling_face:

5

Hi @Billie_Meredith,

Would you like for the popup to only take up less space on your page horizontally? I attach an example screenshot of what that might look like, the actual popup width can be customized.

image
image1311×880 271 KB

Or do you also want it be shorter? In that case we could make the fonts, image and spacing between elements smaller. We could also remove some of the elements from the popup entirely if you like.

Let me know what would work best for you!

1 Like
6

Hello!,

I’d like the padding around to be larger just like that. Not as thin, ideally the same width as the blog underneath - see below the example I liked best. When putting the CSS in the widget it isn’t responding, what am I missing?

.eapp-portfolio-project-viewer-frame-component {
padding: 100px 300px;
}

7

This CSS code should work for you. I added screen width restrictions because the popup would be too narrow on tablets otherwise.

@media(min-width: 1200px) {
  .global-styles, .eapp-portfolio-project-viewer-frame-component {
    padding: 100px 300px !important;
  }
}
2 Likes
8

Thankyou, this has worked perfectly!

1 Like
9

I have a follow-up question about this; I’d like to increase the padding on the mobile popup also, as the text is currently flush - any suggestions?

Thanks

Screenshot 2023-07-19 at 16.59.40|234x499

10

Hi @Billie_Meredith!

This code should do the trick:

@media(max-width: 550px) {
  .global-styles, .eapp-portfolio-project-detailed-component {
    padding: 0 30px;
  }
}