Can I change the position of buttons on a cover page?

I have a cover page on my site that serves as the home page (seen here) and it contains two buttons: one to enter the site itself and a new one I just made so people can subscribe to my newsletter. Currently the two buttons are side by side. Is there a way to change the CSS/html for this cover page and move the Subscribe button down so it's centered just above the social media icons at the bottom? The Enter Site button used to be the main focus of the page and I'd like to keep it that way.

The Custom CSS page in the Design section says you can't edit cover pages from there. Is this even possible to do?

I'm using the Five theme, by the way.

EDIT: In the event that I can't change the position of the Subscribe button (which is actually a form), can I at least switch the buttons around to where Enter Site is on the left?

You might try this in Settings > Advanced > Page Header Code Injection for the Cover Page:

<style>
/*
** reposition the newsletter form 
** subscribe link on the landing page
** down and right
*/
[data-slice-id="575b233d4d088eebd1fbb631"] {
 position: absolute;
 top: 200px;
 left: 335px;
)
</style>  

Let me know how it works.

-Steve

Thanks for the reply Steve. It doesn't look like it's working. The code is copying over perfectly fine and I don't have any syntax errors, but it's not actually affecting the buttons. I know I mentioned that the cover pages supposedly can't be edited with custom CSS, but now that I think about it, one of my friends (who also uses the Five theme, albeit with a different cover page layout) appears to have done some customization on hers (seen here) so I feel like it's got to be possible...

(I did also try injecting your code into the page header - no luck with that either)

My mistake. You said Cover Page and I know better, just had a senior moment. :-)

I edited the answer. To be used in Page Header Code Injection, the CSS needs to be wrapped in

<style></style>

tags.

But I see you've inserted a third button. Can you put the Enter Site and EJ's Blog buttons on the left and the Subscribe button on the right? If so, I think I can give you a look you will like using Flex Box.

So just for fun I went ahead and got rid of the blog button (it was kind of unnecessary and merely there to create some symmetry) and tried pasting the edited code back into the page header. The Subscribe form button moved down, but so did the Enter Site one. I'm thinking I need to swap them and maybe get the Subscribe button on the right so it moves by itself, but I'm honestly not sure how to do that (pardon my noobiness!).

But It's almost like the edits aren't taking for some reason. I went ahead and changed the top margin to 250 just to bring the buttons down a bit further, and (cont'd)

(cont'd) nothing happened. But when I first applied your edited code, the screen turned white and reloaded and then the changes had been put into effect. With any other edits I've tried to make, it just sits there, looking the same, and refreshing doesn't do anything. Even tried logging out and logging back in. So it might just be a matter of the site being glitchy or something.

Can you get the Subscribe button on the right and the Enter Site button on the left? If you can, do so. Let me know either way.

I'm sure there's nothing glitchy about your site. We'll get it working.

Keep a separate browser tab open and navigated to your site as a visitor -- not logged in. When you want to test whether a change has worked, switch to that tab and reload the page. Be sure to click Apply and Save everywhere.

In the meantime, I edited the answer. Try it as the page is right now.

(replying here because for some reason it's not letting me reply to the latest comment) -- okay, we're making progress! I copied the new code and tweaked the values a little to get the Subscribe button further down where I wanted. I feel like such a noob because I just now figured out how to view all the HTML for the site, which is what I'd always been wishing I could do. If you could look one more time and see if both buttons are showing up centered, one below the other, that would be great! Otherwise, I think I've got it from here! Thanks so much for your help and patience :)

I checked the site. When I first landed on the Cover Page, the buttons were there and looked good. But when I reloaded the page the subscribe button was gone. Can't get it back no matter what I do.

If you can get the Enter button on the left and the Subscribe on the right, I think I can get them to align nicely in a column using the CSS Flex Box technology. But for the Enter button to be on top in the column, it has to be on the left in the row.

Let me know if I can help.

Agh not sure why it's not letting me reply to the latest comment...anyway, sorry for the delay. Yes, what you're seeing is correct. I got both buttons all lined up the way I wanted them using a slightly-altered version of your code, but then they were totally screwed up on mobile. After consulting with a friend who has done some web design work, she suggested doing away with the Subscribe button entirely (which is how it was originally) and just have a different subscribe option within the site itself. So that's what I did! I may come back to this later and figure out the mobile interface

OK. Redesign is always an option. :-)

You should have said something. We could try writing a rule just for mobile sizes. If you do come back to it and want some help or input, just leave a comment here and use my username.

Good luck.

Thank you EJFisch for code suggestions!

I have a similar need: to move WELCOME button on a cover page using Five theme.http://idc-design.squarespace.com/

On mobile, the button covers the text in the images (which I understand is not recommended, but yay marketing messages.)

I'd like to move it up 100 pixels or so, into the space reserved for body text on this cover design, which we are not using. It would be awesome if it could be centered, too.

Also: Is it possible to change position display only on mobile?

thank you,Christine

@alxfyv - thank you for the CSS to modify cover buttons!

I have a similar need: to move WELCOME button on a cover page using Five theme: http://idc-design.squarespace.com/

On some mobile devices, the button covers the text in the images (which I understand is not recommended, but yay marketing messages.)

I'd like to move it up 100 pixels or so, into the space reserved for body text on this cover design, which we are not using. It would be awesome if it could be centered, too.

Also: Is it possible to change position display only on mobile?

thank you, Christine

@castigliano:

Hi Christine,

So as not to hijack this question, and to keep it a clean thread, would you please post your issue as a separate question? Then leave a comment here with the url to and title of your question. I will try to help.

Thanks for your understanding.

-Steve

Thanks Steve, here's my new Q:

How to move button on Cover for mobile with CSS:https://answers.squarespace.com/questions/143769/how-to-move-button-on-cover-for-mobile-with-css.html

Thank again,christine

I'm trying to reposition the buttons on my Coverpage so that they're centered and just above the headline. Any clue how to do that with code injection?