Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #870536

    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 :(

    #871086

    Hey multivan2,

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

    Best regards,
    Rikard

    #889982

    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 6 years, 10 months ago by romano2.
    #890332

    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

    #890772

    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 6 years, 10 months ago by romano2.
    #890867

    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

    #890902

    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

    #891068

    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 6 years, 10 months ago by Rikard.
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.