Header Not Visible on Mobile Devices

My header image is visible in desktop view but disappears in tablet and phone views.

This is the website: https://www.cea-nc.org/

I setup a stage with a clean install of WordPress, the Sydney theme and the two required plugins. No other plugins are present. This is what I see:

How do I fix this? Thanks in advance for your help.

Hello there,

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

    @media only screen and (max-width: 1024px) {
      .sydney-hero-area .header-image {
        background-image: url(https://www.cea-nc.org/wp-content/uploads/2020/06/CEAFoundation_Logo_June2020.png) !important;
        display: block !important;
        height: 200px !important;
      }
    }

Regards,
Kharis
aThemes Support

Perfect! Thank you very much.

I had the same issue. With your code it looks perfectly on the mobile view, but on the tablet view the image size does not fit the screen well. How can I adjust this?
This is my website: http://johanna-hector-coaching.com

Thank you very much in advance.

I have found this css code on many forum pages and I can only assume that it only works on a static home page because I have lost many hours trying to get my posts page responsive this way.

Hello there,

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

@media only screen and (max-width: 1024px) {

  .sydney-hero-area .header-image { 
    background-position: center center;
  }
  
}

Regards,
Kharis
aThemes Support

Hi,

Can you share links to your posts, so I can take a look?

Regards,
Kharis
aThemes Support

Thank you, but unfortunately it doesn’t make any difference for the tablet/mobile view.

Hello there,

Thank you for updating me.

Can you take a screenshot/desig of final look you’d like to achieve and update it here?

Regards,
Kharis
aThemes Support

I want it to look the same on desktop, tablet and mobile.
As you see in the screenshot from the desktop view.

Hello there,

Text on the image will against the responsiveness on a mobile device. Because the background image size is set to cover the entire DIV on mobile device and as the result, some areas of the image are cut off and the text might not be readable.

For that case, I’d recommend you use header slider instead and activate its main text slider and subtitle. So from your site’s dashboard, you would go to Appearance > Customize > Header area > Header type. And enable Full screen slider.

Then you can select your slide image from Customize > Header area > Header area > **Header Slider". Set the slide title and subtitle. And you may also need to enable ‘Stop the text slider?’.

I hope this reply helps.

Regards,
Kharis
aThemes Support

Thank you. That is of course true with the text, but since I need to use this special font, I cannot use the text slider option.

Hello there,

We can change the font specifically for the slider title and subtitle with this custom CSS code if your fonts are available at Google Fonts.

    .text-slider h2.maintitle {
      font-family: FontName;
    }

    .text-slider .subtitle {
      font-family: FontName;
    }

Before we apply the code above, fistly we need to call the Google Fonts and include it in our site. The easiest way to do so is use this plugin.

Regards,
Kharis
aThemes Support