Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #425510

    Hi Support-Team,

    sorry for yet another request. I am using Enfold 3.1.3 with a custom header background image with the following settings:

    1. Size 1310x307px
    2. Position of the Image: Aligned Top Left
    3. Repeat: No Repeat
    4. Attachment: Scroll
    5. Header Style: Minimal
    6. Header Custom Height: 206px

    When visiting the site from a mobile device, the background image doesn’t scale down – therefore only a small part of it is visible on the mobile screen.

    Is it possible to fix this somehow?

    Thanks a lot


    Hey Jason!

    On smartphone screens there just isn’t enough space for that to fit inside. You could force it with CSS but then you would not be able to read it.

    If it was me I would place the text in a logo and leave the fighter jet as the background.

    Best regards,


    Hi Elliott,

    thanks. I understand there’s not enough space, but at least some scaling should occur. What CSS could I use to do that?




    If you used it as a logo then that would happen automatically. Maybe something like this would work for you.

    @media and screen (max-width:600px) {
    .header_color .header_bg {
      height: 250px !important;
      margin-top: -80px;
      position: relative !important;
      width: 100%;
      z-index: 999 !important;


Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.