Hero Image not showing for Laptop and Mobile

  • Greetings,

    Sydney is a nice looking and well structured Theme. Am I correct in thinking the default Sydney Theme does not display the hero image at page width of less than 1025px? There is no need to provide a sample site link as this a default install with no theme changes or add-ons.

    I ask because a default install of theme, no starter theme or Elementor being used, and using; Customizer -> Hero Area -> Hero Type -> Front Page Header Type: image, will display the Hero image within Customizer at full width. Whilst still in Customizer change the display to laptop or mobile and the Hero image disappears. This also happen with these settings and viewing a live site.

    Browser Developer Tools shows CSS code as:
    @media only screen and (max-width: 1024px)
    .header-image {
    background-image: none;
    height: auto !important;
    }

    So where/how would one remove the above CSS and allow the Hero image to show?

    Speaking of which, where can one view the default Sydney theme? I checked at athemes.com/theme/sydney/ and could not find a link to default theme demo.

    Thanks

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

  • Hi @website-rob,

    I can confirm that the header image is not visible in smaller screen size (below 1024px). This is not a bug. But it is designed that way.

    If you want to retain the image, you can use this simple CSS code:

    @media only screen and (max-width: 1024px) {
  .sydney-hero-area .header-image {
    display: block !important;
    height: 300px !important;
    background-image: url('https://yoursite.tld/path/to/header.jpg');
  }
}

    Provide your image address to replace https://yoursite.tld/path/to/header.jpg in the code above.

    To apply additional CSS code to your site, go to Appearance menu > Customize > Additional CSS from dashboard.

    Thread Starter Website Rob

    (@website-rob)

    @kharis – thanks for the code. Solves the problem.

    Couple of follow up questions.

    As default is to block the Hero image <1025px page width, are there plans to change that in the near future?

    If a starter site and Elementor were to be used, would it have been possible, within Customizer options, to enable the Hero image <1025px page width?

    I ask because I like the Sydney theme and recommend it to others. Having to install a starter site and/or Elementor to overcome built-in default settings would seem a bit backwards. Many do not want to deal with starter sites as they have their own vision of customizing the theme. And if one purchases the Pro version, will it work as a stand-alone theme with feature rich built-in options and easily overcome built-in limitations; like originally posted?

    A lot of questions, I know, and appreciate you taking the time to answer them.

    Thanks

    • This reply was modified 9 months, 2 weeks ago by Website Rob.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Hero Image not showing for Laptop and Mobile’ is closed to new replies.