Tagged: , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 8, 2015 at 6:42 pm #425510
    Jason

    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

    Issue
    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
    Jason

    April 9, 2015 at 6:14 pm #426120
    Elliott

    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,
    Elliott

    April 11, 2015 at 7:44 pm #427065
    Jason

    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?

    Thanks
    Jason

    April 13, 2015 at 4:18 pm #427562
    Elliott

    Hey!

    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;
}
}

    Cheers!
    Elliott

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