Jump to content

How can I make a code block full width without horizontal scrolling?

Recommended Posts

Site URL: https://duck-guava-kxww.squarespace.com/our-services

I'm trying to create a list using a code block with one small change: the titles of the list need to be links. I've managed to get that working, but I've been having a hard time getting the code block to display full width without making the page too large horizontally. I'd like it to be exactly like https://duck-guava-kxww.squarespace.com/our-services-3 just with links in place of the titles for each item (i.e. "Residential Cleaning", "Deep Cleaning", etc.). I've toyed around with it for awhile and tried a number of suggestions but I haven't cracked it.

I just noticed, too, the way it is appears wrong on mobile as well. On mobile, the text stretches right to the left edge of the screen.

Edited by lg2020
Link to comment

Update: I found a way to do this, by inserting this code into custom CSS:

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

This appears to have disabled the horizontal scrollbar and fixed the issue. If anyone has any better way to solve the problem, please let me know!

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.