Hero not showing on mobile

Hello there,

Thank you for contacting us about our theme Sydney.I am happy to help out.

As checked from your site’s source code, I noticed the below extra CSS code removes the hero image on smaller screen. I request you to delete it from Dashboard > Customize > Additional CSS.

@media only screen and (max-width: 1024px) {
  .header-inner {
    display: block;
  }
  .header-image {
    background-image: none;
    height: auto !important;
  }		
}

What was your intention of adding this? Perhaps I can suggest you with better code.

Regards,
Kharis

Hello Kharis,

Thank you for your quick answer. I loked over but the code isn’t in my childtheme css.

The website is build 4? years back.

I once made some adjustments to the mobile breakpoint (I believe according to this post: https://forums.athemes.com/t/modify-sydney-responsive-menu-breakpoint/5387).
Now I have removed the js file from my child theme, and removed the addition to my function theme). Could this somehow be the cause?

Regards,
Bernhard

Hi Bernhard,

You should go the custom CSS box provided by your plugin, like Simple Custom CSS. If you find the code I mentioned earlier presents in there, you should remove it, save, then take a look how it helps by visiting your site.

You might want to clear cache, history, or cookie on your web browser, and restarting it before visiting your site. Otherwise, it would only load the cached version of your site.

Don’t it help? Or let me know if you need further help.

Regards,
Kharis

Hello Kharis,

I have no plugin like simple Custom CSS. My custom css is placed in a child-theme and the code you describe is not in that custom css. (In devtools I can see the code but have no clue where it comes from). My first thought was it came from Sydney theme, a new option to hide the hero on mobile view?

I removed and cleaned up the caching plugin, cleared cache, history, cookies and restarted the browser but the result is still the same.

Best regards Bernhard

Hi Bernhard,

Please provide screenshots of your header settings under the Customize panel.

You will use a free file hosting service like Google Drive to upload your files and share their public links in you reply.

Regards,
Kharis

Hello Kharis,

You can take a look at the screenshots at https://u.pcloud.link/publink/show?code=kZUC3VXZUaodEgytTMjRJo9LUH7EXLp6kkqX.

Best regards Bernhard

Thank you for sharing the screenshot.

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://mondzorglia.nl/wp-content/uploads/2018/02/mondzorglia-mondzorg-aan-huis.jpg) !important;
    height: 400px !important;
  }

}

Regards,
Kharis

Hello Kharis,

I added the css and it works so the problem is solved. But I still would like to know where the css that hide the hero-image comes from (and how to remove it).

Regards Bernhard

Hi Bernhard,

Glad to hear the code worked for you.

> But I still would like to know where the css that hide the hero-image comes from (and how to remove it).

I don’t have an exact answer until I can access your site’s admin area. However, sharing login credentials is prohibited in this community-based support channel.

Is you still want me to inspecting it further, you can reach out to our own support channel at https://forums.athemes.com/.

Stay safe.
Have an excellent day ??

Regards,
Kharis

I will do that, thaks a lot for solving the problem so far.

Best regards
bernhard