Welcome message not showing 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. 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;
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello,

    I’ve just checked your website and it looks like this issue is already resolved, isn’t it?

    Kind Regards, Roman.

    Thread Starter cdavenport

    (@cdavenport)

    Thank you for your response. I have indeed been able to get the welcome message to show by removing this custom CSS:
    @media only screen and (min-width: 50px) {
    .welcome-info {
    top: 350px;
    bottom: 10px;
    right: 350px;
    left: 350px;
    width: auto;
    }
    }
    and adding the following:
    @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%;
    }
    }

    If possible I would now like to re-proportion the header image on mobile. Currently just a strip from the middle of the image shows (about the width of text). Using the image ‘as is’ without the ‘img.header-image’ piece of code above doesn’t work because it makes the image smaller than the text and makes the last line of text disappear, but ideally a little more of the image width would show and it wouldn’t be quite so tall -right now you have to scroll down quite far to get to the content. Any ideas? Thanks so much!

    Hello,

    You have much additional CSS code and it looks like this issue requires some coding and testing on different screen resolutions.

    This goes beyond aThemes support policy, unfortunately. Hope for your understanding.

    Kind Regards, Roman.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Welcome message not showing on mobile, previous solutions not working’ is closed to new replies.