Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • March 5, 2022 at 5:53 pm #1343267
    garaiko

    Hello,. I am using photos with parralax throughout the web and I have set the background position to top center. They show perfectly on computer screen but they don’t show AT ALL on mobile screen.

    However, when I position the background photo middle of bottom then it shows on mobiles. Besides, the vertical space asigned to this on the mobile screen is huge in all cases – the image covers a small part and the rest is just blank space. I am sending you the link here on private.

    Please check it both on computer and mobile screens. All the parralaxes are set top center except for the last one of the page which is set bottom center and is the only one visible on mobile.

    March 7, 2022 at 4:11 am #1343428
    Ismael

    Hey Angel,

    Thank you for the inquiry.

    The parallax effect is actually disabled on mobile devices by default. Did you edit the scripts to enable the parallax?

    You might have forgotten to post the link in private field. Please provide the site URL so that we can inspect the issue with the parallax element.

    Best regards,
    Ismael

    March 7, 2022 at 6:11 pm #1343528
    garaiko

    Hello Ismael, thank you for your reply.

    You are right, I forgot to add the link. Here you have it in privete.

    I do not expect mobiles to show the parralax effect but they should show at least the background image plain and static. Besides it assigns a huge HEIGHT to the space of the image.

    As I explained, all the parralaxes aligned TOP don’t show on mobiles-: INVISIBLE. But when I position them MIDDLE or BOTTOM, they do show, as you can see on the last parralax almost at the bottom of the page in the link I send you. It’s the one right before the title SALONES, which is the only one not aligned TOP.

    Best regards,
    Angel

    March 9, 2022 at 10:11 pm #1343912
    garaiko

    Helo, hellooo? Anybody there? :-)

    March 10, 2022 at 6:28 am #1343960
    Ismael

    Hi,

    Sorry for the late response. The parallax images are not displaying even on desktop view when we checked the site. Did you update the theme just recently?

    Please try to toggle or temporarily disable the Enfold > Performance > File Compression settings. We will check the site again afterwards.

    Best regards,
    Ismael

    March 10, 2022 at 4:27 pm #1344027
    garaiko

    Jesus! Not my day! You are right, the parralaxes are gone!

    I disabled the File Compression settings and the parralax images are back and showing again on desktop. Please check the site and if you need access or something, please let me know.

    If those settings are making the images disappear, then I should not activate the file compressions again, right!

    It’s not the first time it happens and yes, I am using the latest wordpress and enfold template, just downloaded and installed about almost 2 weeks ago.

    I have another problem: I am unable to have a fullwidth video but I have seen it at your demos, at Home v9 https://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/ So I don’t understand why I can’t manage to make it fullwidth when I am using youtube videos that are 1920×1080 which is 16:9.

    I have tried with normal VIDEO, with Fullscreen Slider, Full width Easy Slider and also with color section as a background, but nothing seems to work and make the video cover full screen width…

    Regards,
    Angel

    March 10, 2022 at 11:24 pm #1344064
    garaiko

    This is in addition to my las message above: the problem with the video, can it be something related to html 5 or to my server?

    This is how you view the video of Home v9 on your demo online: https://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/

    And this is how you view it on the Home v9 of the new Enfold with new Word Press hosted at my server: https://www.goodwave.com/hmi-new/index.php/homepage/home-v9-videos-and-parallax/

    Maybe this can give you a clue as to why the videos are not showing full width on my Enfold…

    March 11, 2022 at 3:44 am #1344088
    garaiko

    Or maybe the problem with the video is not because of the hosting – it is most probably something that is not properly set in my WordPress or Enfold setups…

    March 11, 2022 at 9:25 am #1344095
    Guenni007

    on your css i can see just under a comment : /* diapositivas */
    the rule:

    ul.avia-slideshow-inner {
  width: 1030px!important;
}

    thats the rule that hampers full dimension

    March 11, 2022 at 12:52 pm #1344131
    garaiko

    Thank you so much Guenni. I found another solution for the “diapositivas” that doesn’t affect the fullwidth of the videos. So, that part is handled. I really appreciate your help with this.

    Now waiting for Ismael to pay me some attention regarding the other issue about fullwidth parralax background images not showing on mobiles when aligned top but showing when aligned middle or bottom… The problem is that I need them aligned top and I need them to show on mobile sceens too, not only in computers.

    March 11, 2022 at 2:35 pm #1344143
    Guenni007

    is there a link to an example page?

    March 11, 2022 at 9:04 pm #1344168
    garaiko

    Here you have it Guenni. I really appreciate your help :-)

    👀 Testing page

    March 11, 2022 at 9:54 pm #1344173
    Guenni007

    First thing to mention.
    an ID had to be unique – you got multiple ID’s : hmiparrallax
    if you like to select those sections as a group – give them the class: hmiparallax ( parallel ;) ) one r

    then to see your image ( and they are all 16:9 images ) in contain !
    i would give the color-section via that class a height of: 56.25vw (9/16*100)

    .avia-section.hmiparallax .container {
  height: 56.25vw !important;
}

    your 900px is too big for small screens – a lot of white space will result.

    the rest will come – when you have changed that.

    March 11, 2022 at 10:42 pm #1344177
    Guenni007

    Now see here two example pages:
    https://webers-testseite.de/goodwave/
    https://webers-testseite.de/goodwave2/

    the first is with the height setting of css code above and parallax background-images – ( you see a lot of parallax means bad performant page )
    ( a little trick avoids a white stripe under each hmiparallax section – the background-color of it is equal to the following section ! )

    the second example page is with background-image set to scroll ( yes it is scroll ) and with a pseudo-container before that has inherits the same background-image – and that pseudo-container get position fixed !!
    That is because background-attachment : fixed has problems not only on mobile advices but also on Safari Browsers on desktop.
    to have more of the images on small screens – i set those sections to:

    @media only screen and (max-width:767px) {
  .avia-section.hmiparallax .container {
    height: 100vw !important;
  }
}
    March 12, 2022 at 9:09 am #1344191
    Guenni007

    this might be a solution to your site – but it is more or less a 

    /*** the mobile devices solution ***/
.responsive.avia_mobile #top #wrap_all .avia-section.av-parallax-section .av-parallax {
  height: 57vw !important;
}
.responsive.avia_mobile #top #wrap_all .avia-section.av-parallax-section .container {
  height: 56.25vw !important;
}

/*** a desktop browser approach ***/
@media only screen and (max-width:1700px) {
  .responsive:not(.avia_mobile) #top #wrap_all .avia-section.av-parallax-section .av-parallax {
    height: 100vh!important;
  }
  .responsive:not(.avia_mobile) #top #wrap_all .avia-section.av-parallax-section:first-of-type .av-parallax {
    top: calc(-70vh + 88px) !important
  }
  .responsive:not(.avia_mobile) #top #wrap_all .avia-section.av-parallax-section .av-parallax {
    top: -55vh !important
  }
  .responsive:not(.avia_mobile) #top #wrap_all .avia-section.av-parallax-section .av-parallax .av-parallax-inner {
    background-position: 50% 50% !important;
  }
  .responsive:not(.avia_mobile) #top #wrap_all .avia-section.av-parallax-section .container {
    height: 56.25vw !important;
  }
}
    March 13, 2022 at 7:13 am #1344264
    garaiko

    Hello Guenni, thank you very much for taking the time to help me. It makes sense. I have only used the first entry

    .avia-section.hmiparallax .container {
    height: 56.25vw !important;
    }

    And the huge 928px vertical space is totally shortened on mobiles although the image is nowhere to be seen on mobiles if aligned top. Only when aligned center and bottom. Do you know of any other instruction that I could instruct mobiles to align center or bottom while leaving it top aligned on computer screen?

    I appreciate very much you indicating me the difference between id and class. I have already started changing the IDs I had repeated all over to class. It will take me some time to re-set everything, bu tright now my main concer is that the sliders I had on the site can not be seen on any screen. I saw them nicely until yesterday and since today I didn’t see them anymore and a person who is helping me a bit also tried at his house and nothing. Also the fullwidth videos I set yesterday and which were working fine are nowhere to be seen today. The program is there in the backend but when you check the site ZERO. Any idea? Thank you again for everything. :-)

    March 13, 2022 at 4:52 pm #1344286
    garaiko

    Well, this was interesting – whenever I removed the header from a page, the slider and the videos showed back again, and when I recovered the header, the videos and sliders that use Easy Slider were gone again. So I removed the thop menu and the sliders came back. I investigated further and found out the problem wa scaused because one of the links in the top menu had the form “…/index.es.shtml?dateIn=&nights=&compositions=1&stayplus=false”. I changed it to simply “…/index.es.shtml” and everything was HANDLED!! The link still works and the videos and sliders came back.

    Interesting what can cause a conflict and break a webpage…

    • This reply was modified 2 years, 8 months ago by garaiko.
    March 13, 2022 at 5:40 pm #1344290
    Mike

    Hi,
    Thanks for sharing your clue, your page is giving an error jquery.min.js?ver=3.6.0:2 Uncaught Error: Syntax error, unrecognized expression: #origin=accor
    and I found the error #origin=accor as the URL in your menu button RESERVE YA a URL can not use the equal symbol, if you are sure that this is correct for your affiliate link then try replacing it with %3D
    HTML URL Encoding Reference

    Best regards,
    Mike

    March 30, 2022 at 3:25 am #1346489
    garaiko

    I handled that Mike. I really appreciate your help.

    Best regards,
    Angel

    March 30, 2022 at 1:04 pm #1346563
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘parralax background images positioned "top" not visible on mobile devices.’ is closed to new replies.