Jump to content

Snippet code for font being cutoff

Go to solution Solved by tuanphan,

Recommended Posts

Squarespace replied to my inquiry with the following, "You can also ask for the snippet code on the Squarespace forum from our Circle members. They are likely to provide the code for you to correct the font issue in question, if you want to use custom code to resolve it, even if using it would be at your own risk, so to speak."

Can anyone provide that code for creating a space before a word begins so that "films" and "commercials" can be seen clearly on mobile without the F being cutoff.

I'd also love it if there was a code to make the tagline go below my website title "scott drucker" on mobile only so that way it's not cut off entirely and it shows up on my mobile design as well. And so that on mobile only, the film's title and description fonts are much much smaller so that they are easier to read and appear bottom left the way I have it in my settings. . .but one thing at a time. Just worried about the f in films right now.





Link to comment
  • Replies 4
  • Views 284
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Thanks so much for this. The director/dp is now below my name which is so helpful. But the f is still cut off for me. I can live with it though. I'm wondering if it depends on the phone model? Maybe your phone has just a slightly wider screen and therefore it doesn't get cut off? Like I said, if there's not a fix for it, no worries, I'll just live with it being cut off on mobile. 

Also wondering if you could help with the following (and happy to leave you a tip on your website for your help):

4. The titles and video descriptions on the films and cinematography pages are so big that it's cluttered and you can't tell what's going on (and yet pretty small IMO on desktop). They are also not on the bottom left on mobile like I have set in the site design. Not sure why they're all center-punched on mobile. It would be great to get that much smaller and in the left hand corner as well like the desktop. . .without have the fonts super small on desktop. Here's a sample:



Link to comment
  • Solution

With F, try adding this to Design > Custom CSS

/* f cut off */
@media screen and (max-width:640px) {
span.collection-nav-item-span {
    display: block !important;
.collection-nav-desc-wrapper.show {
    width: 100% !important;
    left: 0 !important;
.index-gallery-wrapper {
    margin-left: 15vw !important;
    overflow: visible !important;

With text position, try this CSS

@media screen and (max-width:640px) {
.image-title-desc * {
    font-size: 10px !important;
.image-title-desc {
    bottom: 10px !important;
    margin-left: 5vw !important;


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

This is all great! Thank you @tuanphan The F is still being cut off on both of my phones, and I'll report that to squarespace since that is definitely a bug on their end if you've tried two different custom codes for it. For now, I will live with it. 

If you can create some new code for this issue, that would be amazing! Unfortunately it's still playing the video if you click anywhere on the screen:


Edited by scottdrucker13
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.