Hey Lena , 

Try adjusting these Trypography Settings : 

Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

@media only screen and (max-width: 690px) {
    .container article.post .post-header h2 {
        font-size: 18px !important;
        line-height: 21px !important;
    }
}

Thanks

Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

@media only screen and (max-width: 690px) {
    #page-header-bg.fullscreen-header .span_6 h1, .overlaid-content h1 {
        font-size: 32.5px!important;
        line-height: 41px!important;
    }
}

Thanks

Hey again,

Thanks for keeping in touch with us.

Kindly try adding the code below and see if that works:

@media only screen and (max-width: 690px){
.single-post div#page-header-bg {
    height: 350px!important;
}}

@media only screen and (max-width: 690px){
#page-header-bg.fullscreen-header .blog-title h1 {
    padding-top: 20%!Important;
    font-size: 30px!Important;
    line-height: 30px!Important;
}}

Please let me know if there are any more questions that I may answer for you :)

Cheers! 

Hi lenaagree,

Apologies for the late reply.

About that font being bing on mobile, this is being caused by some CSS that might be added to the salient theme options.

Please try cut and remove the CSS at salient \ general settings \ css script related - custom css code and keep in on a text file - save and run the site without it. You can then put it back from the text file.

This particular piece of CSS seems to be causing the enlargement:

media only screen and (max-width: 690px){
#page-header-bg.fullscreen-header .span_6 h1, .overlaid-content h1 {
    font-size: 67.5px!important;
    line-height: 63px!important;
}
}

Let us know how this goes and we can take it from there.

Hi there,

Apologies for the late reply.

Could you have temporary admin access so that we can have a better look at the page code and the salient theme options area.

Thanks.

Hi lenaagree,

About the post title being too large on mobile view, this is being caused by CSS that we added before. The nature of the situation is that the title for your post http://drlenaagree.com/could-the-man-in-your-life-be-depressed/ is to long and it would be best if you added the CSS to fix it to that post only to fix the issue. 

We recommend this because without the CSS we added before every other title looks okay e.g. http://drlenaagree.com/what-is-great-sex-part-2/ 

So we added this to the page settings on visual composer on the post with the issue i.e. here http://drlenaagree.com/new/wp-admin/post.php?post=334&action=edit

@media only screen and (max-width: 690px){
#page-header-bg.fullscreen-header .span_6 h1, .overlaid-content h1 {
    font-size: 37.5px!important;
    line-height: 54px!important;
}
}

See screenshot.

This was the CSS that was there i.e. at salient \ general settings - css script related - custom css code, before we removed it. 

header#top #logo {
    color: #444444;
    display: block;
    font-family: "Playfair Display";
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 22px;
    max-width: none;
    width: auto;
}
/* Make the Masonry Blog height Uneven (Not Fixed) */
#post-area.masonry.classic_enhanced article.post.large_featured, #post-area.masonry.classic_enhanced article.post.regular .article-content-wrap, #post-area.masonry.classic_enhanced article.post.regular.format-standard.has-post-thumbnail, #post-area.masonry.classic_enhanced article.post.regular.format-video.has-post-thumbnail, #post-area.masonry.classic_enhanced article.post.regular.format-audio.has-post-thumbnail {
    height: auto!important;
}
.credentials {
    font-family: Raleway;
    font-size: 64%;
    font-weight: 100;
    letter-spacing: 0px;
    line-height: 40px;
    opacity: 1;
}
#footer-outer .widget h4, .text-on-hover-wrap .categories a {
    font-size: 14px;
}
.default-blog-title.fullscreen-header {
    background-color: #63717d !important;
}
#slide-out-widget-area .menuwrapper {
    padding-bottom: 20px;
}
.wpb_text_column a { color:#9fa59f !important;
    text-decoration:underline !important;
}
.wpb_text_column a:hover { color:#2a2434 !important;}
a:hover {color:#2a2434;}
@media only screen and (max-width: 600px) {
    .pageheadline {
        padding:20% 8% 11% 8% !important;
    }
    .approach h2 {font-size:40px !important;}
   
}
}
div[data-style="minimal"] .toggle h3 a, div[data-style="minimal"] .toggle h3 {
    font-size: 24px !important;
    line-height: 18px !important;
    text-decoration: none !important;
}
blockquote {
    font-family: "Open Sans";
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: 35px;
    margin-bottom: 30px;
    margin-top: 15px;
    margin-left: 9%;
    font-style: italic;
}
.nectar-google-map {
    border: 1px solid #e7e6e8;
}
.main-content ol li {
    padding-bottom: 10px;
}
@media only screen and (max-width: 690px) {
    .container article.post .post-header h2 {
        font-size: 22px !important;
        line-height: 25px !important;
    }
    #homeheader {padding-top:40% !important;}
   
    .wpb_column.instance-1::before {
    background-color: #63717d;
    opacity: 0.6 !important;
}
}
@media only screen and (max-width: 690px){
.single-post div#page-header-bg {
    height: 450px!important;
}
    
}
@media only screen and (max-width: 690px){
#page-header-bg.fullscreen-header .blog-title h1 {
    padding-top: 20%!Important;
    font-size: 30px!Important;
    line-height: 30px!Important;
}
    
}
@media only screen and (max-width: 690px){
body.single.single-post #page-header-bg > div.container > div{
    padding-top:60% !important;
    font-size:30px !important;
}
}

Now the headings are okay.
Please consider this option.