Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 15, 2022 at 3:36 am #1376250
    navindesigns

    Throughout my site, I have a series of Full Width Easy Slider at the top of the page (eg – https://balrajt13.sg-host.com/air-charter/). My client now want so make the images shorter in height ONLY on desktop. What is the best way to do this?

    Can this be done with CSS or do I have to manually crop the images and reupload them back to the Full Width Easy Slider . Again it should only affect desktop and not mobile.

    Please advice

    Thanks

    December 16, 2022 at 4:04 am #1376334
    Nikko

    Hi navindesigns,

    Try adding this CSS code in Enfold > General Styling > Quick CSS:

    @media only screen and (min-width:1200px) {
  #top .avia-fullwidth-slider .avia-slideshow {
    max-height: 70vh;
  }
}

    Just adjust the max-height value (70vh is 70% of the height of the screen).
    Hope it helps.

    Best regards,
    Nikko

    December 16, 2022 at 4:16 am #1376336
    navindesigns

    thanks

    I would like to exclude the homepage slider only. how do I do that?

    Home

    December 16, 2022 at 5:54 am #1376341
    Nikko

    Hi navindesigns,

    Please try to use this CSS code:

    @media only screen and (min-width:1200px) {
  #top .avia-fullwidth-slider .avia-slideshow {
    max-height: 70vh;
  }

  #top.home .avia-fullwidth-slider .avia-slideshow {
    max-height: none;
  }
}

    Best regards,
    Nikko

    December 19, 2022 at 3:52 am #1376656
    navindesigns

    Can the image be centered center? Meaning a little bit of the top and bottom gets cropped out instead of just the bottom gets cropped out?

    December 21, 2022 at 8:06 pm #1377041
    Mike

    Hi,
    Thank you for your patience but I’m not sure what you mean. Do you mean the cropping of the slider image or the placement of the slider image in the slide?
    To adjust the Crop Position please see this article: Adjust WordPress Image Crop Position
    For the fullsize slider image try adding this to your child theme functions.php:
    add_image_size( 'featured_large', 1500, 630, array( 'center', 'center' ) );
    and then regenerate your thumbnails using the regenerate thumbnails plugin.

    Best regards,
    Mike

    December 21, 2022 at 8:47 pm #1377045
    navindesigns

    I went ahead and manually crop all the slider images and you assisted me on this thread https://kriesi.at/support/topic/fix-layer-slider-text-on-tablet/ so I think we can close this one out. If you see anything that does not look good on tablet, please let me know

    thanks as always

    December 22, 2022 at 8:50 am #1377073
    Nikko

    Hi navindesigns,

    We’re happy to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Make Full Width Easy Slider Image Height Shorter’ is closed to new replies.