Jump to content

Split centered buttons on 7.0 Cover Page

Recommended Posts

Hi, 

I'm willing to move my both cover page buttons to be perfectly centered on the left half of the page and the right half.  

Also, I would like to have the buttons to stay on the same line when showing on mobile or tablet (or not moving one on each other)

Can anyone help here ?

Here is the page : https://louiseproductions.squarespace.com/nouvelle-page-de-couverture-1

Thank you!

Robin

 

Capture d’écran 2023-09-13 à 08.50.42.png

Edited by moretrobin
Link to comment
  • Replies 9
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Try this as a start:

.responsive-wrapper .actions {
  width: 100% !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] ul {
  display: flex;
  justify-content: space-between;
}

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
6 hours ago, Ziggy said:

Try this as a start:

.responsive-wrapper .actions {
  width: 100% !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] ul {
  display: flex;
  justify-content: space-between;
}

Hey @Ziggy

Thank you for helping me!

Unfortunately it doesn't seem to do the job (see screenshot)

Can you maybe help further ?! 

Thank you so much!

Robin

 

Capture d’écran 2023-09-13 à 17.10.32.png

Link to comment

@Ziggy @moretrobin With Cover Page, you need to add code to Cover Page Settings > Advanced > Code Injection. Custom CSS box won't affect Cover Page

<style>
  .responsive-wrapper .actions {
  width: 100% !important;
}
.sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="buttons"] ul {
  display: flex;
  justify-content: space-between;
}
</style>

 

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
1 minute ago, tuanphan said:

With Cover Page, you need to add code to Cover Page Settings > Advanced > Code Injection. Custom CSS box won't affect Cover Page

Thanks for adding that @tuanphan I had forgotten that necessity with the old 7.0 cover pages.

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

dear @tuanphan thank you very much for helping further here!

actually I clicked on the settings of the cover page and pasted the code in the code injection section (see screenshot) but both buttons are still sticked to each other in the center of the page (and not centered on each half of the page). 

See the page _ https://louiseproductions.squarespace.com/nouvelle-page-de-couverture-1

Do you know how I could change this?

Thank you!!

 

Capture d’écran 2023-09-15 à 20.09.07.png

Link to comment
On 9/13/2023 at 1:54 PM, moretrobin said:

Hi, 

I'm willing to move my both cover page buttons to be perfectly centered on the left half of the page and the right half.  

Also, I would like to have the buttons to stay on the same line when showing on mobile or tablet (or not moving one on each other)

Can anyone help here ?

Here is the page : https://louiseproductions.squarespace.com/nouvelle-page-de-couverture-1

Thank you!

Robin

 

Capture d’écran 2023-09-13 à 08.50.42.png

You mean move this?

image.thumb.png.f4c461f3148b6867107bf81945aebc94.png

image.thumb.png.f1e5e1bc96c3d7c8c17618d829494e9b.png

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
On 9/16/2023 at 1:11 AM, moretrobin said:

dear @tuanphan thank you very much for helping further here!

actually I clicked on the settings of the cover page and pasted the code in the code injection section (see screenshot) but both buttons are still sticked to each other in the center of the page (and not centered on each half of the page). 

See the page _ https://louiseproductions.squarespace.com/nouvelle-page-de-couverture-1

Do you know how I could change this?

Thank you!!

 

Capture d’écran 2023-09-15 à 20.09.07.png

The url doesn't work now. Can you check it again?

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

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.