Header image problems.

  • jtoney7852

    (@jtoney7852)


    7 years ago

    So I’m working with a Beaver Builder theme (I hate they removed the forum) and I’m having issue with a responsive header image. No matter what I do I can’t seem to get the header image to resize on tablet or mobile views. I also had to add code

    */ .fl-page-nav-right .fl-page-header-container { padding-bottom: 0px; padding-top: 177px; }

    to make the header image appear or some of it was always cut off. Anyone ever experienced this or know how to fix it.

    For now I went into individual pages and made the header an image on page. Really need to figure this out.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @jtoney7852,

    Thanks for posting!

    Do you mind sharing the URL of the site in question so we can check? ??

    Ben

    Thread Starter jtoney7852

    (@jtoney7852)

    Its local on my computer using xampp. Thats what makes it hard to get help.

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @jtoney7852,

    It’s definitely going to be a bit hard to assist without seeing the actual page in question. Do you think you can push a copy of the site to a staging URL?

    It sounds like you’re having issues with the background header. We can probably just replace the background with a different image when it hits a certain viewport width via custom CSS. ??

    Ben

    Thread Starter jtoney7852

    (@jtoney7852)

    What do you suggest to try for the CSS?

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @jtoney7852,

    The snippet below should allow you to change the background images on medium and small devices.

    /* Change header background on medium devices */
@media (max-width: 992px) {
  .fl-page-header {
    background:url('https://www.domain.com/background-992px.jpg');
  }
}

/* Change header background on small devices */
@media (max-width: 768px) {
  .fl-page-header {
    background:url('https://www.domain.com/background-768px.jpg');
  }
}

    You can place it under Appearance > Customize > Additional CSS.

    Ben

    Thread Starter jtoney7852

    (@jtoney7852)

    I applied that CSS and still nothing. I went digging in some settings for the header layout. I have it set for Nav Bottom but I had to adjust the padding or the thing wouldn’t show up at all. Suggestions now with the new info?

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Hey @jtoney7852,

    Apologies for the delayed response here.

    Did you make sure to change the URL on the snippet? It’s pretty hard to say why it isn’t working without access to the actual site. Is the site going live soon? Or will you be moving it to a staging URL before going live? We can check there instead. ??

    Ben

    Thread Starter jtoney7852

    (@jtoney7852)

    No, I won’t be moving it to a staging server or putting it online until I get the whole thing built and fixed. I did change the urls. What about the settings, is there something I need to look for specifically in there to make this look and act correctly?

    Plugin Contributor Ben Carlo

    (@hinampaksh)

    Our Nav Right and Nav Bottom layout assigns their background image to the same element, fl-page-header. Are you placing the snippet in the Additional CSS section of the customizer? Do you mind sharing the actual snippet you’re using so we can check?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Header image problems.’ is closed to new replies.