Okay
  Public Ticket #3092258
page header
Closed

Comments

  • stefangostischa started the conversation
    July 27, 2022 at 9:29am

    Hi there,

    I used the page header basically on each page of my website, no I´m looking for the option to assign a different image for mobile devices since the used pics are certainly optimized for desktop (all landscape format) and mostly don´t really work as I desire on smartphones or tablets. Couldn´t find where to upload an alternative image for mobile, can this only be done via CSS (which I would like to try to avoid if possible), and if so can you help please?

    Thanks very much!

    Stefan

  •  277
    Noah replied
    July 27, 2022 at 9:57am

    Hi Stefan,

    There is no option for a mobile only page header image.
    To avoid CSS that what we can suggest as a workaround is use the row elements background image option since you can set a different image for mobile tablet and desktop. See attached screenshot.

    Then set the row to be full screen or who ever you want it to appear.
    https://themenectar.com/docs/salient/page-builder-row/

    Try that.

    Attached files:  row_background.png

  •  1,643
    Judith replied
    July 27, 2022 at 10:01am

    Hello There,

    Thanks for choosing Salient.

    Please paste the css below in Salient > General settings > CSS/Script Related to resize the image on mobile.

    @media only screen and (max-width: 999px){
    #page-header-wrap.fullscreen-header, #page-header-wrap.fullscreen-header #page-header-bg, html:not(.nectar-box-roll-loaded) .nectar-box-roll > #page-header-bg.fullscreen-header, .nectar_fullscreen_zoom_recent_projects, .nectar-slider-wrap[data-fullscreen="true"]:not(.loaded), .nectar-slider-wrap[data-fullscreen="true"]:not(.loaded) .swiper-container, #nectar_fullscreen_rows:not(.afterLoaded):not([data-mobile-disable="on"]) > div {
        height: calc(25vh - 1px);
    }
}

    Thanks.