Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1213646

    I just bought your theme ENFOLD
    The reason I got is cause I liked “enfold-visual-artist\” demo. you have said that your theme is responsive however the background images are not shown on IOS and are too big and stretchy on android. I have followed on the forum (#1077937 ):
    https://kriesi.at/support/topic/fixed-background-responsiveness-issue/#post-1080580

    And added this css code using \”Simple Custom CSS\” plugin:

    @media only screen and (max-width: 1024px) {
    .avia-bg-style-fixed {
    background-attachment: scroll !important;
    background-size: cover !important;
    }
    }

    It Does not work or maybe I did something wrong.
    Please solve this issue

    #1214648

    Hey,

    We are sorry for the late reply!

    Please add following code to Quick CSS in Enfold theme options > General Styling

    @media only screen and (max-width: 1024px) {
        .avia-safari .avia-bg-style-fixed .av-parallax {
    	background-attachment: scroll !important;
    	background-size: cover !important;
        }
    }

    In case you have enabled CSS file merging and compression in Enfold theme options > Performance, please disable it, save theme options, refresh your page a few times and then re-enable it.
    If it does not help or if you would like us to add the code for you, please create temporary admin logins and post them here privately.

    As my teammate Ismael mentioned here, this is related to Safari

    Regards,
    Yigit

    #1214751

    I have done everything like you said.
    before I could not see the images at all and now I can see them however
    1.They are too big and part of them is off the screen. desktop version is perfect
    2.The images are scrolling together with the foreground color so I do not get the affect you get in the desktop which is basically the point of the theme
    3.when I switch the phone horizontally the images are in the right size but still move with the foreground

    I am using a fresh wordpress install and a fresh theme so I suggest you do the same and tell me what to do in order for it to work

    #1216197

    Hi osovskie8,

    Parallax does not work on mobile in this implementation. You can hide these sections and show other sections on mobile screens.

    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

    
    .avia_mobile #top .av-parallax {
        background-size: contain !important;
    }

    If you need further assistance please let us know.

    Cheers!
    Victoria

    #1218479

    Hey,

    Sorry for my late reply.

    I can see the code Victoria shared is applied on your site. When I switch it to following on Safari developer mode, it works fine on my end.

    .avia_mobile #top .av-parallax {
    background-size: contain !important;
    background-attachment: scroll!important;
    }

    I attached a screenshot in private content field.

    Please update your CSS code. If you would like us to update it for you, please share admin logins in private content field :)

    Regards,
    Yigit

    #1218500

    It is better, I can see the images now but they are not sitting right. I am attaching private info for you to fix

    #1218560

    Hi,

    I changed the code to following one

    .avia_mobile #top .av-parallax {
    background-size: contain !important;
    background-attachment: scroll!important;
    background-position: 50% 65%!important;
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
        top: 0;
      }
    }

    Please review your website :)

    Best regards,
    Yigit

    #1243289

    Hello,

    Same problem here, images were not showing in the first place. I’ve put in both CSS-fragments, disabled the CSS-file merging and tried different order of the code-fragments. I know see the images (which is an improvement), but the ‘parallex effect’ (images fixed and moving 2 versions over each other) is not working. Both versions (drawing and photo) are now showing up under each other and that’s not even close to the desktop version which I fell in love with ;)

    My question: is this (ever) going to work on mobile devices, especially iOS versions of Chrome and Safari? Victoria replied: ‘Parallax does not work on mobile in this implementation’, is there a way to fix this so it works the same as on desktop browsers? Or is this technically impossible? Of course I can hide sections on mobile devices as a work-around, but that is not a fix for me, the effect is gone.

    I will put the website and credentials in the private content of this message, this is the CSS-code I used:

    .avia_mobile #top .av-parallax {
    background-size: contain !important;
    background-attachment: scroll!important;
    background-position: 50% 65%!important;
    }
    
    @media only screen and (max-width: 767px) {
      .responsive #top #wrap_all #header {
        position: fixed;
        top: 0;
      }
    }
    
    @media only screen and (max-width: 1024px) {
    .avia-bg-style-fixed {
        background-attachment: scroll !important;
        background-size: cover !important;
    }
    }

    Thanks for your help in advance!

    Best regards,
    Linus

    • This reply was modified 3 years, 6 months ago by Linus. Reason: Further clarified my question, want to knowe if this is _ever_ going to work
    #1245967

    Hello,

    Any progress on this matter yet? We are really looking for a solution, it’s not acceptable on mobile right now….

    Thanks!

    #1247390

    Hi @jg73,

    We are sorry for the late reply!

    It is technically possible but not without heavy modification. Therefore, we keep it disabled instead of offering it as an unreliable feature :)

    You can read more about it here – http://www.javascriptkit.com/dhtmltutors/parallaxscrolling/page2.shtml

    Best regards,
    Yigit

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