Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • May 2, 2017 at 4:48 pm #786531
    timahe

    Hi,

    on my customers home site I have a color section with a background image.
    Inside the color section there is a text field and 2 PNG pictures, you can see here:

    View post on imgur.com

    The problem is: we are using parallax and everything works fine on desktop devices. But on mobile (iPhone 6/7) my customer has problem as the text is directly on her mouth of the background image in the color section. (see screenshot in private content)

    Is there a way just for mobile devices to set all elements of the color section a little bit lower so the elements arent disturbing anymore?

    Regards

    May 2, 2017 at 9:32 pm #786723
    John Torvik

    Hey Tima,

    Thanks for using our theme :)

    I am sorry, but Ive checked your site on the mobile devices (iPhone and iPad) and all is working normally and there isnt text on woman`s face.

    May you share some screenshots, please?

    Best regards,
    John Torvik

    May 3, 2017 at 12:12 pm #787047
    timahe

    Hello,

    I have already shared in last private content. But now see again what I mean (s. private content)

    May 3, 2017 at 2:49 pm #787164
    Nikko

    Hi,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .page-id-804 #av_section_2 .avia-builder-el-12 {
    padding-top: 20px;
  }
}

    Just adjust the top padding value as you see fit. Let us know if this helps :)

    Best regards,
    Nikko

    May 3, 2017 at 9:06 pm #787399
    timahe

    Ok this is better now but is it possible to move all elements down a little bit more ? (it would also possible to smaller all elements a little bit)

    And I still have problem in landscape mode (see private content). Is it possible to update those elements for the mobile devices in landscape mode?

    May 4, 2017 at 5:13 pm #787947
    timahe

    ? :-D this is really important for me / my customer..

    May 4, 2017 at 10:39 pm #788098
    Basilis

    Hi,

    You can increase the padding from 20 to something else, and it will do fix your problems.

    Best regards,
    Basilis

    May 5, 2017 at 1:37 am #788162
    timahe

    Hello,

    I already assumed that but whats about the problem with landscape mode on ipads? Is there a possibility especially to move the text block in this mode so it looks good?

    Thanks

    May 5, 2017 at 5:26 am #788182
    Sarah

    Hi!

    To move the text block specifically for iPad landscape mode only, you can use this code

    @media only screen and (min-width:767px)
  and (max-width: 1024px) 
  and (orientation: landscape) {
  .page-id-804 #av_section_2 .avia-builder-el-12 {
    padding-top: 25px;
  }
}

    Then please adjust the value of the padding to fit your preference.

    Best regards,
    Sarah

    May 5, 2017 at 11:50 am #788334
    timahe

    Hi,

    thank you for this. Works great. ONE last thing:
    On my friend iPad the whole face in the background picture is not shown.. (see screenshot private content) On desktop devices theres no problem as using parallax they can see everything by scrolling.
    Is there a possibility to show another area of the picture especially on ipads?

    Thanks for your help!!!

    May 5, 2017 at 12:10 pm #788341
    Sarah

    Hi!

    To move the background specifically for iPads (portrait and landscape), you can use something like this code:

    @media only screen 
  and (min-width: 768px) 
  and (max-width: 1024px)  {
  .page-id-804 #av_section_2 .avia-builder-el-12 {
    background-position: center -100px;
  }
}

    Please replace the second value in the background-position (-100px) to fit your preference. Putting 0px will align the top of the image to the top of the section. A negative value nudges the image higher. A positive value will make it lower.

    For more information about background-position attribute, please see this: https://www.w3schools.com/cssref/pr_background-position.asp

    Best regards,
    Sarah

    May 5, 2017 at 2:00 pm #788381
    timahe

    Hi,

    I tried but it does not have any affect on the picture. Maybe you could also check, you will find your code as last in quick css (login data in first post – private content).

    Regards and thanks for your help :)

    May 7, 2017 at 7:08 pm #789142
    Victoria

    Hi timahe,

    Here, try this code:

    
@media only screen and (min-width: 1280px) {
  #av_section_2 .av-parallax.enabled-parallax.active-parallax {
    min-height: 770px;
  }
  #av_section_2  .container {
    min-height: 500px;
  } 
   #av_section_2  .container .entry-content-wrapper.clearfix {
     padding-top: 40px;
   }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    May 8, 2017 at 2:52 pm #789628
    timahe

    Hi,

    should I use Sarahs code as well? The only thing I want to do is to show the face in the background picture on iPads (both landscape and normal mode). This is not shown on iPad (mini as well as normal size) and unfortunately Sarahs code does not take any affect on the display height for me.

    Regards :-)

    May 8, 2017 at 6:52 pm #789773
    Victoria

    Hi timahe,

    You can remove Sarah’s code and you should clear the cache on your iPad or test on another iPad to see if the changes had effect.

    Best regards,
    Victoria

    May 8, 2017 at 7:14 pm #789786
    timahe

    Hello,

    I already tried this (of course with clearing cache, another device etc.) – I still can’t see a change – the face doesn’t get shown full. On the iPhone it looks fine (even in landscape mode), on desktop devices also (but there is parallax).
    I provided wp login in the first post, maybe you could also have a look at it — really strange…

    Regards

    May 9, 2017 at 12:38 pm #790209
    Victoria

    Hi,

    The face shows when you scroll, if you want to show it at the top, you need to have a taller image and the face should be towards the bottom of the image, but then again it will have to be adjusted to desktop screens.

    Best regards,
    Victoria

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