Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 9, 2017 at 3:02 pm #861927
    Nick Alta

    Hello,
    I’m running a website and for this website I’m using the ‘Full Screen Slider’ element on 2 different pages (‘Home’ page and the ‘About’ page). It shows beautifully on the web browser but I’m experiencing some issues on mobile. For some odd reason the Full Screen Slider image on my Home page is looks great, but on the ‘About’ page, the element image is overly zoomed in, blurry and pixelated. I don’t understand why this is happening because the images used on both pages are the same dimensions, same png image file, same settings, same everything.

    October 10, 2017 at 5:15 am #862249
    John Torvik

    Hey hallyupedia,

    Let`s try some basic things to fix it:

    1. Disable all of your plugins to see if there are any plugin conflicting.

    2. Remove any custom code added by you.

    3. Ensure that you`re using the latest version of our product.

    Best regards,
    John Torvik

    October 15, 2017 at 9:29 pm #864550
    Nick Alta

    Hello,

    1. I tried deactivating all plug-ins and that didn’t solve the issue. Even if that was the problem, from the beginning it did not affect my homepage mobile view. Only the About page seems to be a problem.

    2. Other than the codes added to the Enfold >General Styling ( provided by Kriesi Support ) I have not added my own custom codes.

    3. Latest version of Enfold was already updated.

    October 17, 2017 at 5:02 am #865089
    Ismael

    Hi,

    The background image is a bit too small that’s why it’s blurry.

    // https://box.hallyupedia.com/wp-content/uploads/2017/10/FSHeader20171009074603.png

    Please consider the standard screen resolutions as reference for image sizes.

    // https://www.w3schools.com/browsers/browsers_display.asp

    Best regards,
    Ismael

    October 17, 2017 at 3:08 pm #865304
    Nick Alta

    Hi Ismael,
    I reuploaded the same image in a larger version. Unfortunately, that is not the cause of the problem because it didn’t change anything. Also, i’d like to add that I’m not as concerned about the blurriness. I’m more concerned that the image is too zoomed in when in mobile screen. The full screen slider image in the homepage does not share that problem.

    October 18, 2017 at 10:48 am #865634
    Victoria

    Hi hallyupedia,

    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: 767px) {
  .avia-fullscreen-slider .avia-slideshow>ul>li {
    background-size: contain;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 18, 2017 at 2:23 pm #865721
    Nick Alta

    Hello,
    Sorry, that didn’t fix the problem for me. Entering the code is making the image smaller and it’s repeating like a pattern.

    October 18, 2017 at 11:49 pm #865982
    Nick Alta

    Hi Victoria,
    I figured out the problem. I took the code you provided and added it to the custom css class for the element.
    The issue is now resolved. You can close this thread. Thank you for your help.

    October 19, 2017 at 10:12 am #866131
    Rikard

    Hi,

    Great, glad you got it working and thanks for the feedback. I’ll go ahead and close the thread, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

    October 19, 2017 at 10:12 am #866132
    Rikard

    Closing.

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Mobile View: Full Screen Slider image is blurry’ is closed to new replies.