Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 20, 2017 at 5:00 pm #736580
    SuperflyVisuals

    Thank you for a very nice theme to work with. I think you are delivering an incredibly satisfactory all-round package! :D

    ///////////////////////////////////////////////////////////

    The customer have trouble with a top of page Full Screen Slider with an image inside (locked + center,center placement).

    I develop on Windows 10, and have tested in

    • Edge
    • Firefox
    • Opera
    • Chrome
    • Windows 10 Mobile Edge (Lumia 950)
    • Windows Phone 8.1 IE (Lumia 920)

    All work well with the image scaling.

    On iPhone 5 series however, it looks like below. (The image does not scale well, and you only see top left part of image I think)
    problem shown on iPhone 5
    https://www.dropbox.com/s/5vc48u9qz7p6u8r/Vi-arbejder-problem-p%C3%A5-iPhone.jpg?dl=0

    Can you assist me in rooting out the problem. (I have tried the forum without luck.)

    ///////////////////////////////////////////////////////////
    In addition
    ///////////////////////////////////////////////////////////
    Another problem regarding fonts, again ONLY on iPhone Safari
    I added webFonts via CSS3

    body {
    font-family: questa_sansregular !important;
    }
    h1,h2,h3,h4,h5,h6 {
    font-family: questa_sansregular !important;
    font-weight: normal;
    }
    `
    and the fonts is reportingly not working there either.

    What is wrong with Apple and iPhones?? :S
    PS: I tried emulating on following sites without it showing the problem.

    I have also verified the problem on iPhone 6 and iPhone 7 as well (do not have direct access to these though).

    January 25, 2017 at 7:19 am #738154
    Ismael

    Hey SuperflyDK!

    Thank you for using Enfold.

    Please edit the slider images then set the Image Position to “Center center”. Another workaround is to create multiple versions of the slider image for different devices then apply it by using css media queries. Example: 

    @media only screen and (min-width: 768px) and (max-width: 989px) {
/* slide 1 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(1) {
    background-image: url(IMAGE FOR TABLET) !important;
}

/* slide 2 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(2) {
    background-image: url(IMAGE FOR TABLET) !important;
}
}

@media only screen and (max-width: 767px) {
/* slide 1 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(1) {
    background-image: url(IMAGE FOR PHONE) !important;
}

/* slide 2 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(2) {
    background-image: url(IMAGE FOR PHONE) !important;
}
}

    Cheers!
    Ismael

    January 25, 2017 at 3:45 pm #738419
    SuperflyVisuals

    Hello Ismael,

    It is a bit weird, since I have never encountered this Apple Safari problem before on my other Enfold Projects.

    The image is already ‘center center’ placed, so that is not the problem…. Can you try your collegues about whether they have experienced these Apple Safari strange behaviours before or have any suspicions as to what is causing them?

    I will have a look, on the CSS solution with different images targeted at different devices.

    Thanks for the help, and again thanks for the excellent Enfold and accompanying great support.

    January 30, 2017 at 4:32 pm #740260
    Andy

    Hi,

    the CSS solution with different images for different screen sizes should definitely work. Let us know if you still need help with it.

    Best regards,
    Andy

    February 3, 2017 at 2:30 pm #742364
    SuperflyVisuals

    Ismael, your solution worked after a little modification. Great :)

    Andy, all is good :)

    PS: Except the font problem, but I will take that to a separate thread.

    • This reply was modified 7 years, 10 months ago by SuperflyVisuals. Reason: Font problem
    February 6, 2017 at 4:46 pm #743450
    Andy

    Hi,

    Glad we could help!
    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Full screen slider – iPhone scaling problem (and css webfonts problem)’ is closed to new replies.