Hello Cameron,

Thanks for writing in!

When the line height and font size feel too tight on mobile, it is usually because the Responsive Font Resizing isn't aggressive enough for the specific length of your project title.

You can fix this using the built-in theme options or a targeted CSS snippet.

If you only want to change the header for your portfolio items without affecting the rest of the site, add this to Salient > General Settings > CSS/Script Related > Custom CSS Code:

/* Adjust Page Header Typography for Portfolio Projects on Mobile */
@media only screen and (max-width: 999px) {
    .single-portfolio .row .col.span_12.project-title h1 {
        font-size: 32px !important; /* Adjust size as needed */
        line-height: 1.4 !important; /* Increases the vertical spacing */
        letter-spacing: 0.5px !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust the subtitle/excerpt if it also feels too tight */
    .single-portfolio .row .col.span_12.project-title p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
}

NB: We've included comments in the code for your review.

For a deeper dive into how Salient handles typography, see the Salient Typography Documentation.

Let us know if this works or you need further assistance.

Best,

Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

@media only screen and (max-width: 690px) {
    body.single-portfolio .row .col.section-title.span_12 h1 {
        line-height: 1.3em !important;
    }
}

Thanks

You only need to add the below one to adjust the line height and fix the overlap.

Thanks 

I cant seem to view the code provided earlier in the page html source. See screenshot of how the code should work:  

1. Please clear your cache using this guide: https://themenectar.ticksy.com/article/6226/ .
2. If you are using WP Rocket use this guide :  https://docs.wp-rocket.me/article/108-render-blocking-javascript-and-css-pagespeed#critical-path-css .
3. For Woocommerce caching issues see: https://docs.woocommerce.com/document/configuring-caching-plugins/ . 

Thanks