Welcome message missing on mobile, previous solutions not working

The welcome message shows perfectly on laptop but not on mobile (iphone). I understand that this is the default for the Moesia theme and I have tried adding several pieces of code that I found in this forum to ‘Additional CSS’ to correct it but without success. It’s possible this is due to other things I’ve added to reformat the welcome message (remove drop shadow, adjust position, add second line, text size and spacing)? See below. The site is clairedavenport.com. Thank you for your help!

    @media only screen and (min-width: 50px) {
    	.welcome-desc {
    		font-size: 32px !important;
    	}
    }

    @media only screen and (min-width: 50px) {
    	.welcome-info {
    		top: 350px;
    		bottom: 10px;
    		right: 350px;
    		left: 350px;
    		width: auto;
    	}
    }

    div.welcome-info div.welcome-desc::after {
    	content: ‘COME SEE WHAT’S POSSIBLE.’;
    	display: block;
    }

    .welcome-desc {
    	text-shadow: none !important;
    }

    .welcome-desc {
    	line-height: 1.7;
    }

Hello there,

Firstly try removing this custom CSS code:

    @media only screen and (min-width: 50px) {
      .welcome-info {
        top: 350px;
        bottom: 10px;
        right: 350px;
        left: 350px;
        width: auto;
      }
    }

Then add this code:

    @media only screen and (min-width: 768px) {
      .welcome-info {
        top: 350px;
        bottom: 10px;
        right: 350px;
        left: 350px;
        width: auto;
      }  
    }

    @media only screen and (max-width: 767px) {
      #masthead.site-header {
        height: 100vh; 
      }
      #masthead.site-header img.header-image {
        display: block;
        object-fit: cover;
        height: 100%;      
      }
    }

Regards,
Kharis

Thank you so much for the response!
The text now shows, but could you tell me if there’s a way to re-proportion the header image?

It looks now like just a strip from the middle shows (about the width of the text). Using the image ‘as is’ (ie without the ‘img.header-image’ piece of code) makes it smaller than the text and the last line disappears, but it would be great if a little more image width showed and if the image were not quite as tall so you wouldn’t have to scroll down quite so far to get to the content. A;so, the other pages (like Work) that didn’t have a header image now have a large white space at the top so they appear blank until you scroll down.

Let me know if that doesn’t make sense. Thank you again!

Claire

Hello Claire,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    #masthead.site-header {
      max-height: 100vh !important;
    }

    #masthead.site-header.has-banner:after {
      background-size: cover;
    }

Let me know how it helps.

Regards,
Kharis