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!
