Jump to content

Problems with Text Lightbox (Featherlight)

Recommended Posts

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!

 

about section lightbox screenshot.jpg

about section screenshot.jpg

Link to comment
  • Replies 7
  • Views 735
  • Created
  • Last Reply
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

 

Link to comment
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

about mobile vs desktop.jpg

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.