Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #801663

    Hey guys,

    I would like to shrink the size of the fullscreen slider images on mobile.

    Right now, the images are huge and do this weird function where the image gets even bigger as you scroll down.

    Please go to this page on mobile to see what im talking about:

    Thank you,
    Chris

    #801788

    Hey ccyran,

    This plugin should help you: https://wordpress.org/plugins/adaptive-images/

    Best regards,
    John Torvik

    #801791

    Cool! I’ll give it a try.

    Any suggestions what to tick off in this plugin?

    #802193

    Hey John,

    I think you may have misinterpreted my request. I don’t want to compress the images. It’s appearing too big on mobile, only the fullscreen slider.

    I downloaded the plugin and it only made the images pixelated. It didnt resize it.

    Thank you,
    Chris

    #802301

    Hi,

    I apologize if I misunderstood your question. May you tell me the dimensions that you want to resize the fullscreen slider?

    Best regards,
    John Torvik

    #802759

    Hey John,

    I don’t know of the specific dimensions, I just want the fullscreen images to show fullwidth in tablet and mobile dimensions/browsers.

    Here’s an example of how I want it to function:

    http://23d.one/
    First open it on desktop, then see how the behavior of the fullscreen image changes as it goes from tablet to mobile. This is what I want to achieve, and what I thought fullscreen slider would do.

    I don’t want to do fullwidth slider because it loses the fullscreen effect.

    Thank you,
    Chris

    For further reference, this is how my site currently looks now on mobile, using fullscreen slider.

    https://ibb.co/i20B5v
    Same page on desktop: http://www.ccyran.com/projects/rga-stories/

    • This reply was modified 6 years, 10 months ago by ccyran.
    #804055

    Hey any luck? :)

    #804327

    Hi,

    The images in the slider are actually set as background and the size property is set to “cover” forcing the image to cover the whole slider area. On smaller screens, the images have to overflow outside the background positioning area in order to keep its aspect ratio. We can set the background size property to “contain” but it will create spaces or gaps around the slider and setting the property to 100% will probably distort the image. The workaround is to hide the full screen slider on mobile and then display another.

    // http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Or provide images that are specifically created for mobile view.

    .avia-fullscreen-slider .avia-slideshow>ul>li:nth-child(1) {
        background-image: url(mobile-image-1.jpg) !important;
    }
    
    .avia-fullscreen-slider .avia-slideshow>ul>li:nth-child(2) {
        background-image: url(mobile-image-2.jpg) !important;
    }
    

    If you want to set the background size property “contain”, you can try this css code.

    .avia-fullscreen-slider .avia-slideshow>ul>li {
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
    }

    Best regards,
    Ismael

    #804345

    Hey Ismael,

    I see. I tried that CSS and it creates the exact issues you mentioned, so I won’t do that.

    I think I’ll do the option where I hide fullscreen sliders on mobile, and replace it for a fullwidth slider.

    My issue now is that I dont see a custom CSS class field in fullscreen slider or fullwidth slider elements. I only see it in for other things. Is this the same as “For Developers: Section ID” that appears at the bottom, in things like “Grid Row”?

    Sorry ignore that part, the URL link you gave me said to add it to functions.php , but it was actually supposed to go inside “functions-enfold.php”

    I’m going to give this a try now and get back to you shortly!

    Thank you,
    Chris

    • This reply was modified 6 years, 9 months ago by ccyran.
    #1118765

    Hei Guys,

    i have a similar thing in my mind. So.. On an other Slider we made by hand. We always load small thumbnails in the slider. Like a “gallery” image or a “thumbnail” image. With JQuerry I look if we have a desktop size in the browser and then just replace the images with the larger images. (MOBILEFIRST).

    I want to do something like this with the Enfold Fullscreen slider. But the slider always loads the fullsize images what make sense.

    Is there a hook or an easy change to do what iIwant?

    #1119100

    Hi hunter74,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Victoria

    #1119104

    Hi Victoria,

    yes I know. It is actually an important feature for enfolds future…
    So Adaptive Images (Plgin) is doing the job. But I thought it is slowing down my website more.

    Would be an important feature – so why not implement this..
    BEtter than implementing every time new features that slowing down enfold.

    #1119247

    Hi hunter74,

    I totally agree with you, maybe it will be implemented sometime in the future.

    Best regards,
    Victoria

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