Jump to content

Button formatting

Recommended Posts

Hi 

Please can anyone help with button formatting?

I would like two buttons side-by-side on my homepage. I have created the buttons and they look fine on all desktop sizes, but when I check anything smaller (iPad pro and smaller) they start to overlap and they are not the same size/aspect. One is a primary, one is tertiary, but I have checked the button settings and they are the same.

Many thanks in advance.

Link to comment
  • Replies 12
  • Views 889
  • Created
  • Last Reply

Top Posters In This Topic

Hi.

I would like to have the buttons side-by-side on all screen sizes and also the same size and shape as each other. (I guess ideally they would probably be slightly smaller on mobile vs desktop too).

I would also like to prevent the overlap which occurs at screen sizes of 1000px (wide) and less.... although they don't overlap for every screen less than 1000px e.g. they overlap for iPad at 768 but not iPhone 12 at 390.

 

Link to comment
22 hours ago, HATP said:

Hi, 

Yeah, it's in there. (In the Custom CSS box, in the Design section).

 

I see it worked here, from screen sizes 768px to 1000px

If you have problem with other sizes, just adjust these number

image.png.bafb042f29dde6056b1c03121d88772a.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

Hi, 

Thank you ever so much - that CSS has put some space between the two buttons.

However, the positioning is skewed to the right on iPad. I don't understand this, because when I look at the positioning of the buttons on the grid they are equal distances from the middle...?

Also, the two buttons are different height sizes on iPad Pro. The right-hand button is fatter. Is this because the text has wrapped onto two lines? If so, is it possible to alter the padding within the button so this doesn't happen? I can't see a way to do it in the button settings. 

Lastly, I have tried to stack the buttons on mobile now because they were not sitting right side-by-side. However, I think it would be better to remove the lower button from mobile view altogether. Is this possible?

Link to comment
  • 3 weeks later...

Hi, 

Thank you ever so much - that CSS has put some space between the two buttons.

However, the positioning is skewed to the right on iPad. I don't understand this, because when I look at the positioning of the buttons on the grid they are equal distances from the middle...?

Also, the two buttons are different height sizes on iPad Pro. The right-hand button is fatter. Is this because the text has wrapped onto two lines? If so, is it possible to alter the padding within the button so this doesn't happen? I can't see a way to do it in the button settings. 

Lastly, I have tried to stack the buttons on mobile now because they were not sitting right side-by-side. However, I think it would be better to remove the lower button from mobile view altogether. Is this possible?

Link to comment
  • 1 month later...

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.