Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 15, 2016 at 11:39 pm #648903
    lzevon

    I have a color section that serves as a page header. I have it configured to use parralax and in the desktop view, I have the most success using Top Left as the background image position and scaled to fit “so the whole image is always visible.”

    As you can see from the attached, the whole image is not always visible on responsive layouts (none except tablet landscape (1024). Can you tell me how to ensure that the header images I am using site-wide will display on all layouts?

    Thank you!

    June 17, 2016 at 5:05 am #649544
    Rikard

    Hi lzevon,

    That would be hard to achieve unfortunately, one option you could try would be to create a second section which will only show for mobile devices, and use an image better adapted to small screens. You can then use CSS like this to hide/show the correct section: 

    @media only screen and (max-width: 767px) {
#desktop-section {
display:none !important;
}
}

@media only screen and (min-width: 768px) {
#mobile-section {
display:none !important;
}
}

    Best regards,
    Rikard

    June 17, 2016 at 2:04 pm #649767
    lzevon

    Is there a better way then (other than the color area and to achieve the title space we need? It seems unlikely for such a great theme that we would not be able to achieve this responsively?

    Thank you

    June 20, 2016 at 7:07 pm #651026
    Vinay

    Hi,

    We would be glad to help you with this customization, but at the moment there is no easy way to do this by using a small custom code. It’s just the way the browsers handle the background images to fit them in the available space.

    Try adding the below css in Enfold > General styling > Quick CSS it will make it look a little better in mobile devices.

    You could also try the other scale to fit – stretch image to cover and see if that works out better for you.

       @media only screen and (max-width: 767px) {
    #av_section_1 {
    max-width: 100%;
    max-height: 90px;
    }}

    Best regards,
    Vinay

    June 20, 2016 at 7:14 pm #651030
    lzevon

    I figured out a better way to do it – you can close this ticket. Thanks

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Are color section backgrounds responsive?’ is closed to new replies.