Jump to content

How can I position my Button in the middle of my aligned image?

Recommended Posts

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home

Hello, I am trying to organise my image in such a way so I can have a button positioned on top.

I have done this by setting my image as a background, so I can add a button block on top.

I have also used some code to tweak the position of where my image sits on the page. Here is the code:

/* INSET LEVELS ON 1ST HEADER SECTION */
[data-section-id="6034c2b9d8e50b04d5651ea4"] {
 .section-background {
    top: 5vw!important;
    right: 3vw!important;
    bottom: 5vw!important;
    left: 21vw!important;
  }
}

Unfortunately, now my button no longer looks like it is in the middle of the 'image' rather it is naturally in the middle of the 'page' still, please see attached.

How can I move the button (and above green image) so it sits more in the middle of the main image?

I'm not sure if there is a better way to do this - I tried to add a spacer left (next to my nav links), and the image to the right of the spacer (so the spacer could push the image into position), but I can't figure how to add my green image and button on top of an image block.

Please help!

Page = https://bluebird-porcupine-yzdg.squarespace.com/home

Pword = bluebird (may not need pword as site is live)

 Many thanks!

button-1.png

button-2.png

Link to comment
  • Replies 2
  • Views 606
  • Created
  • Last Reply

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.