user996544 user996544 - 9 months ago 31
CSS Question

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; }

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download