Jump to content

Tablet view with Fluid Engine - CSS Help for Button, Text and Images

Recommended Posts

https://www.edwinamoutrayimages.com.au/

Needing some assistance on resizing buttons to suit tablet size, what would be the best css to use to make sure buttons on tablet view size down nicely, and don't have the words jump to the next line see screenshot. Would it have something to do with the padding? 

 

Also, is there a code snippet to allow the images to not stretch at this size also? There's obviously a break point between mobile and smaller tablet view where it looks super messy, would love if the mobile view I can see worked up to laptop size. Not sure if thats even possible 

 

Tips and trick welcomed! Thank you 

 

Screenshot 2024-05-01 at 8.31.00 PM.png

Link to comment
  • Replies 1
  • Views 362
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hey @jesleacreative - this is such a great question; the lack of tablet view in the editor can cause some design headaches 🫠 we do have some options with custom code, but before we jump to those, you can try setting the buttons to fit instead of fill under the design menu for those buttons. You can stretch the container (blue outline) to be centered under the three columns but take up more space, so the button has room to stretch to fit the text, even when displayed on smaller screens. Here is a little example for you: 

button design - fill vs fit.png

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

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.