Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #791960


    I’m trying to create a very simple photography portfolio. At the moment, I’m using the “Easyslider” and am pretty happy with the result. I know it’s responsive for screen width. But: is it possible to make the Easyslider responsive for screen HEIGHT?

    Basically, similar to this:

    Independent of browser window width OR height: the viewer gets to see the entire image. No need to scroll up or down.

    How can I achieve this with Enfold?
    Is the “Easyslider” the way to go, with some extra CSS?
    Or is there another, better option built into Enfold?

    Thank you!


    Hey BelIblis,
    I tested this on my localhost, and using two 1/2 column elements, I put the Easyslider in one with some text in the other & the Easyslider worked as you described. I’m not sure about the size images you will be using so try the different “Slideshow Image Size” options such as medium (300×300)

    Best regards,


    Hi Mike,

    Your solution works, but it’s not what I’m looking for…
    I’m using Chrome to test, with the “Window Resizer” plugin, which allows me to change browser window to the most common window sizes.

    Similar to your idea, I’ve used 1/5 + 3/5 + 1/5 (which would be a little small in larger screens), but even then: at smaller screen sizes, the image gets cut off and the user needs to scroll down.

    I’ve seen many photographer portfolios, which are basic, yet effective and beautiful: simple slider with images ALWAYS displayed fully. No matter what screen size: iPhone, hi-res desktop screen…

    Is there ANY way to achieve this with Enfold?
    Maybe by placing the menu-navigation on the left? Or by targeting the main container via css?
    Or by removing the footer area?
    Or maybe with a plugin?

    Enfold’s “Fullscreen slider” does it, but then the image is too large and doesn’t have any white space around it…
    Maybe the “Fullscreen Slider” with some css to add margin/padding?


    I’ve tried the following Easyslider CSS, which kind of works. But only for certain screen aspect ratios. (I’m using images with a with:height ratio of 3:2).

    .avia-slideshow-inner {	
    align: center;
    width: 90vh;
    height: 90vw;
    margin-left: auto;
    margin-right: auto;

    As soon as the ratio between viewport height & viewport width becomes “too square”, the image gets cropped, or “squared off” itself. But it’s a start…
    What do you think about the above CSS? Any ideas of how to improve it?



    Here you go, on how to target different screen sizes

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.