-
AuthorPosts
-
October 30, 2017 at 4:04 pm #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 :(November 1, 2017 at 8:18 am #871086Hey multivan2,
Could you post a link to the page in question so that we can take a closer look please?
Best regards,
RikardDecember 18, 2017 at 12:07 pm #889982Hello
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.
December 19, 2017 at 5:08 am #890332Hi 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,
RikardDecember 20, 2017 at 2:42 pm #890772Thanks 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.
December 20, 2017 at 5:32 pm #890867Hi 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,
VictoriaDecember 20, 2017 at 6:58 pm #890902Ok, 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 -
AuthorPosts
- You must be logged in to reply to this topic.