Jump to content

Stop buttons from colliding at Tablet size

Recommended Posts

Site URL: http://jeanettepididesign.com


I'm running into an issue on my site when at Tablet size. I have three buttons in a row, but they collide on a tablet. They are fine on desktop and they break onto separate lines on mobile which is also fine.

If you look at the edges of the page, it looks like the issue is with the left button not moving left when scaling because the left and right sides are not even. Not sure what's causing this or how to fix it. I would either like to have the left button shift left correctly or have them split onto three lines like they do for mobile. 

I have a spacer placed on both the left and right edges, I think this may have something to do with it.

Attached is a screenshot, but the site is also live.

Any ideas on how can I achieve this? TIA!



Edited by JeanettePidiDesign
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

I ended up just removing the spacers. They were causing the collision. It looks like the left spacer would remain when viewed at tablet size, but the right one was disappearing, causing the left side to have an indent while the right did not. I tried removing the left spacer on tablet only with CSS but it wouldn't readjust the rest of the content. They are a bit spread apart now on desktop view, but I will be able to live with it.

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.