Jump to content

How to create a bespoke bordered text with overlapping image and button

Go to solution Solved by Ziggy,

Recommended Posts

Hello,

The first attached image shows how the services section on my homepage is currently looking. I would like it to look similar to the second attached image, only with the addition of the circular images that sit on top of the top of each box, and align centrally. 

I would like my three services boxes to be the same height and for the link to sit on top of the bottom of the box. I've tried to do this myself but I can't get the buttons to align centrally, or with each other.

password: !(cX3Ly@$323cC(

Thanks!

Screenshot 2023-05-11 at 15.27.33.png

Screenshot 2023-05-11 at 15.20.50.png

Link to comment

Can you share the website URL? 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
19 minutes ago, Leanne_M said:

Sorry I did when I submitted the question, or I thought I had. 

You did, but that doesn't get passed through with the question, design flaw on the forum, not your fault.

This feels like it should be possible with FE, but the issues with 3 columns of 7 with 2 gap columns doesn't work evenly on the 24-wide grid, and you're going to have a problem with getting the overlapping to work nicely on the buttons as you really want the buttons half way, I'll have a quick play on one of my test website and see if I can make it work. The alternative would be to use a list section and code to adjust it.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I've made this in a grid editor section, does that look more like what you want (minus styling)?

https://quillfish-tangerine-4c2a.squarespace.com/test-layout?password=testing123

PW: testing123

image.thumb.png.6e17ba2d742c6cf10aee2475bd049c27.png

Thoughts?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You could alter the width of that section with this CSS:

#sectionID {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

Or you could make each piece of content 8 columns wide and increase the column grid spacing to give you more padding between them, like this:

image.thumb.png.0ee89742f90b0222c57636beb92a66f3.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@Ziggy I've just tried that CSS to adjust the section width but unfortunately it didn't change anything. Maybe I've got another bit of CSS that is overriding it.

With your help I've managed to get the boxes the same size now. Is is possible to have the buttons aligning centrally on the bottom border? They're off centre at the moment.

Also, (and this may be a weird glitch) but when I try and move the content I'm finding that the buttons are jumping around. I'm trying to reposition the content in mobile view and the buttons won't stay in position. Have you experienced this?

Thanks!

Screenshot 2023-05-12 at 10.14.25.png

Link to comment
  • Solution
49 minutes ago, Leanne_M said:

I've just tried that CSS to adjust the section width but unfortunately it didn't change anything. Maybe I've got another bit of CSS that is overriding it.

Did you update it with your section ID, like this:

section[data-section-id="645cb6f2618e5568187ecbc2"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

 

50 minutes ago, Leanne_M said:

With your help I've managed to get the boxes the same size now. Is is possible to have the buttons aligning centrally on the bottom border? They're off centre at the moment.

I would suggest making the button blocks 1 row taller, and keep the vertical align set to center.

51 minutes ago, Leanne_M said:

Also, (and this may be a weird glitch) but when I try and move the content I'm finding that the buttons are jumping around. I'm trying to reposition the content in mobile view and the buttons won't stay in position. Have you experienced this?

Not specifically, but Fluid Engine is glitchy in more ways then I'd like, it can make it quite frustrating!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Leanne_M said:

Thank you for help (and quick replies!) it's looking much better now.

I agree, it looks great! 

You do have a problem with the tablet view on that section, do you have a min-width set in Custom CSS?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
35 minutes ago, Ziggy said:

I agree, it looks great! 

You do have a problem with the tablet view on that section, do you have a min-width set in Custom CSS?

Oh I haven't looked at the responsiveness yet other than seeing what it looks like in mobile view. I'm working towards getting the site pretty finished and before I tweak the CSS for different sizes.

Link to comment

@Ziggy If I could tag another slightly related question onto this one...

On my About page I have another three column section that I'd like to adjust the width of to match the section you helped me with on my Homepage. I've tried to apply the same code you gave me for this section but it's not working. I'm guessing it's something to do with this section being a "Simple List" and there's code already in use that is overriding the CSS I'm trying to apply.

Link to comment
1 minute ago, Leanne_M said:

"Simple List"

If it's a simple list then you should be able to adjust the width with this Custom CSS:

section[data-section-id="63fe2ec0bd372c1f5ac06ca5"] .user-items-list-simple[data-layout-width="inset"] {
    max-width: 100vw;
}

I'm not sure if I picked the correct section to target, but you can change the section ID.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
14 minutes ago, Leanne_M said:

That's worked perfectly! Thank you 😀

Wonderful!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.