Search code examples
htmlcsssquarespace

Correcting custom desktop CSS for mobile view


I have used this custom CSS to format the last three letters of the single word on the second line of my banner text on my site as bold. However, the mobile view of the last three letters displays it as a subscript. I would like all of the second line in the mobile view to be the same size as the last three letters. The website is chad-ruffin.squarespace.com. Custom CSS:

.desc-wrapper p:nth-of-type(2) 
{ display:inline-flex; 
font-family: brandon-grotesque; 
font-weight: 400; 
font-style: normal; 
font-size: 68px; 
text-transform: uppercase; 
line-height: 1em; }

Solution

  • It's not a subscript. It's just that the font-size: 68px is larger than the rest on mobile. Scale it down on mobile to maybe 36px and it should fit right. You might have to change the line-height too.