Jump to content

Trying to get buttons to be side by side on Desktop and mobile devices

Go to solution Solved by Beyondspace,

Recommended Posts

  • Solution
1 hour ago, Outlast-Creative said:

Site URL: https://buryvanhire.squarespace.com/under-construction-temp-homepage

Hi all,

Can someone please help me with a problem I'm having with the alignment of my buttons on desktop and mobile. I want them to be on the same line but it's proving difficult. Any help would be much appreciated.

Password: test123

Try adding to Home > Design > Custom Css

#block-yui_3_17_2_1_1639174066624_15567 a, #block-c2c58944f06ef98f96f2 button  {
  line-height: 1;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

My testing result

image.thumb.png.2b0b1eb578b25cafc47cdaa64969dfd0.png

Desktop

image.png.ece572fb6d8cf3fb71ceee8002d6232b.png

Mobile

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

Link to comment

Can you replace call with number with just call us?

image.png.c72328764e36b9a94006ac70ab107da0.png

Try

@media only screen and (max-width: 767px) {
  #block-7648514dc177f5516b84 + .row  > .span-6 {
    width: 50% !important;
    float: left !important;
  }
}

Hope it helps

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 No-code customisations for Squarespace
🚀 Learn how to rank new pages on Google in 48 hours!

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.