Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 11, 2017 at 10:44 pm #791960
    BelIblis

    Hi,

    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:
    http://photomichaelwolf.com/#real-fake-art/1

    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!

    May 12, 2017 at 3:20 am #792005
    Mike

    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,
    Mike

    May 12, 2017 at 11:41 am #792224
    BelIblis

    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?

    May 12, 2017 at 12:59 pm #792257
    BelIblis

    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?

    May 12, 2017 at 8:24 pm #792484
    Basilis

    Hi,

    Here you go, on how to target different screen sizes

    @media queries Responsiveness

    Best regards,
    Basilis

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