Tagged: 

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • May 30, 2017 at 9:07 pm #801663
    ccyran

    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:

    R/GA Stories

    Thank you,
    Chris

    May 31, 2017 at 5:18 am #801788
    John Torvik

    Hey ccyran,

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

    Best regards,
    John Torvik

    May 31, 2017 at 5:22 am #801791
    ccyran

    Cool! I’ll give it a try.

    Any suggestions what to tick off in this plugin?

    May 31, 2017 at 9:19 pm #802193
    ccyran

    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

    June 1, 2017 at 5:01 am #802301
    John Torvik

    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

    June 1, 2017 at 8:02 pm #802759
    ccyran

    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 7 years, 5 months ago by ccyran.
    June 5, 2017 at 5:20 pm #804055
    ccyran

    Hey any luck? :)

    June 6, 2017 at 6:47 am #804327
    Ismael

    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

    June 6, 2017 at 7:17 am #804345
    ccyran

    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 7 years, 5 months ago by ccyran.
    July 15, 2019 at 1:41 pm #1118765
    Raphael

    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?

    Startseite

    July 16, 2019 at 9:32 am #1119100
    Victoria

    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

    July 16, 2019 at 9:49 am #1119104
    Raphael

    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.

    July 16, 2019 at 6:56 pm #1119247
    Victoria

    Hi hunter74,

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

    Best regards,
    Victoria

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