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!



Link to comment
  • Replies 2
  • Created
  • Last Reply

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


This topic is now archived and is closed to further replies.

  • 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.