Problems with Text Lightbox (Featherlight)

Site URL: https://cardioid-yellow-72c3.squarespace.com/

Hi Forum, 

I have been working on a website for my music studio for a while now. Sine I had a lot of pretty specific ideas the website also involves a lot of basic coding. I have tried to fix the issues I'm having by myself but I'm stuck so I decided to give the Forum a shot. 

Specifically the "About" Section on the website is giving me trouble. The idea is to have different "bubbles" to visually show the structure of our operation. Underneath these "bubbles" we have a short sentence describing it and then a "read more" that will open a pop up with the rest of the text. That's where I'm having trouble. 

The Lightboxes were done with Featherlight and although there is multiple posts in the forums about these featherlight boxes, I couldn't find a way to fix my issues and I really looked hard!

1.) How can I get the "read more" button to be centered? Seems like a simple thing to do but all the code options I tried for centering it either didn't do anything at all or they broke the lightbox and it stopped working. (I am talking about the actual "read more" that I'd like to center btw)

2.) How do I further format the box that pops up? I know this would involve CSS scripting and I also tried to find some instructions about that but to no avail. I did manage to give it a colored background but I'd like the font to be the same as my Theme's Font (Futura Font I believe) and I'd like the whole box, including the text, to be "slimmer". Right now it fills the width of the screen and the long text is displayed as 2 or 3 lines only which looks quite awkward and just not professional. I'd like the text to be more of a Box format if that makes any sense. 

I hope you can help me with this! Thanks a lot and have a great week everybody!

Hi. What is password?

Hi, the password is 

GuterTon123

Thanks! 

On 5/31/2021 at 4:30 PM, Society77 said:

Hi, the password is 

GuterTon123

Thanks! 

Add to Design > Custom CSS

/* center readmore */
.code-block a {
    text-align: center;
    display: block;
}
/* popup font */
.featherlight-content p {
    font-family: Poppins;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
}

Hi tuanphan,

Thanks a lot, worked like a charm!!

Any idea on the last part of my question about how to make the box and text more of a square shape instead of filling out the whole screen? I'd love for the text to be displayed in more but shorter lines instead of just 2 or 3 that fill out the width of the screen. I hope this makes sense, I can clarify if not. 

Super happy about this forum, thanks again!

17 hours ago, Society77 said:

Hi tuanphan,

Thanks a lot, worked like a charm!!

Any idea on the last part of my question about how to make the box and text more of a square shape instead of filling out the whole screen? I'd love for the text to be displayed in more but shorter lines instead of just 2 or 3 that fill out the width of the screen. I hope this makes sense, I can clarify if not. 

Super happy about this forum, thanks again!

 

Add to Design > Custom CSS

/* Lightbox width */
.featherlight-content {
    max-width: 70%;
}

Hi Tuanphan, thanks again! That's exactly what I needed. 

I have one last question if you don't mind. I noticed that on the mobile version the order of these "bubbles" is not how I'd like them to be. On the desktop view I have the main one (society77 in the darker bubble) on top and the other 3 white bubbles below that, as this represents the structure of our operation. On mobile, it moves the white label77 bubble up to the top, followed by the dark society77 bubble. 

I know this is pretty specific but is there any way to get the dark main bubble to show up at the top on mobile? (hope this makes sense, I'm happy to clarify if not)

Thanks a lot in advance

I basically want to switch "label77" and "society77" in the left screenshot but only on the mobile view, desktop view is fine the way it is

Thanks