Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 30, 2017 at 4:04 pm #870536
    multivan2

    i checked every post in this forum regarding the responsiveness of color section background images, found similar threads with this problem but no working solution.
    when i use a background image in color section (background repeat set stretch to fit,background attachment parallax) on smaller screens/mobile devices the background image is not responsive at all, while the overlaying text is. please provide a working solution (i tried all the suggestions and custom css codes in other threats and they don`t work).
    I bought the enfold theme because it is advertised as fully responsive and it is very frustrating that such a basic element like color section background image seems not to be responsive out of the box :(

    November 1, 2017 at 8:18 am #871086
    Rikard

    Hey multivan2,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    December 18, 2017 at 12:07 pm #889982
    romano2

    Hello
    I’ve got the same problem.
    For example, the first photo with 3 girls on :
    http://www.titanicsisters.com/wp/spectacle-de-rue-lacher-de-sisters/
    > On desktop, no problem. We can see the 3 girls.
    > On mobile, the background image is not responsive : We can’t see the 3 girls !
    background-position: center right; doesn’t work. Neither ‘top right’ or ‘bottom right’.
    Thanks providing a solution.

    • This reply was modified 7 years ago by romano2.
    December 19, 2017 at 5:08 am #890332
    Rikard

    Hi romano2,

    Did you try to add another Color Section element with an image better adapted to mobile screens? You can hide/show the correct one in the element options. Some loss of image data is inevitable when having them as backgrounds.

    Best regards,
    Rikard

    December 20, 2017 at 2:42 pm #890772
    romano2

    Thanks for answer.
    Yes it can be a solution to add another section.
    But it doesn’t resolve the background-position error in mobile view… It would be more practical.

    • This reply was modified 7 years ago by romano2.
    December 20, 2017 at 5:32 pm #890867
    Victoria

    Hi romano2,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
  #av_section_1 .av-parallax-inner.avia-full-stretch {
    background-size: contain !important;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    December 20, 2017 at 6:58 pm #890902
    romano2

    Ok, I played with background-size in % and background-position works again :

    @media only screen and (max-width: 479px) {
  #av_section_1 .av-parallax-inner.avia-full-stretch {
    background-size: 150% !important;
    background-position: bottom right !important;
  }
}

    Thanks

    December 21, 2017 at 10:59 am #891068
    Rikard

    Hi,

    Great, glad you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    • This reply was modified 7 years ago by Rikard.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.