Jump to content

Responsive Text for Homepage Block

Go to solution Solved by tuanphan,

Recommended Posts

Hi! I'm a designer and I just launched a fresh site using the Impact template in SquareSpace. We noticed that when we view our site on our phones (I'm specifically on an iPhone13) that the text breaks in the middle of a word instead of being responsive to the screen size. I pulled code off of ChatGPT and tried it in a few areas on the site. 1. Design, Custom CSS 2. In the advanced area of the homepage settings. Below is the two snippets I tried...

<style>
    /* Default font size for homepage */
    .homepage .responsive-text {
        font-size: 16px;
    }

    /* Adjust font size for smaller screens */
    @media only screen and (max-width: 768px) {
        .homepage .responsive-text {
            font-size: 14px;
        }
    }

    /* Adjust font size for even smaller screens */
    @media only screen and (max-width: 480px) {
        .homepage .responsive-text {
            font-size: 12px;
        }
    }
</style>
 

AND

/* Example code for making a specific text element responsive */
@media only screen and (max-width: 768px) {
  .your-text-element {
    font-size: 14px;
  }
}

@media only screen and (max-width: 480px) {
  .your-text-element {
    font-size: 12px;
  }
}
 

I'm thinking I need to adjust something more in this code, maybe the .yourtextelement, I'm not sure about the @media portion, etc. I'm not great with CSS, and I do minimal coding.

Attached is the view I'm trying to fix. Any help is appreciated, thank you!

Screenshot 2023-05-02 at 3.33.08 PM.png

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

Top Posters In This Topic

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.