Avada Forums Community Forum Fusion Slider Images are Being Cropped in Slider

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • rtamouzian1
    Participant
    Post count: 1

    I am trying to build a Slider. I have added 3 images that are identical in size (1920 x 550). For some reason when I view the slider the right and left side of the images are not showing (they appear to be cropped). I have watched the video on how to use the Fusion Slider but nothing is working no matter what configuration I make. I have set the width of the slider to 100% and the height to 550px. This should be simple but it is not. Any suggestions? I would think I should not have to make any custom css settings I hope.

    marklchaves
    Participant
    Post count: 873

    Hi,

    This should be simple but it is not.

    Responsive web design (RWD) is anything but simple. Do a search on responsive web design to see for yourself.

    Cover versus Contain
    Without seeing your images, I assume that what is being cropped out of the left/right are important to you. That means you probably want them in view for all viewports (devices and orientations). If I’m right, you might want to try using background-size: contain; for your slider image instead of the default cover setting.

    What’s the difference between cover and contain? See a live demo on CodePen https://codepen.io/marklchaves/full/KELeEV

    How do you implement background-size: contain;? I answered this in a previous post on this forum. I also have a live demo of my answer on CodePen as well https://codepen.io/marklchaves/full/yWZZQa

    In the second CodePen, a forum participant said the the (two) ladies on left and right end of the image were not happy about being cut-out of the image on smaller devices. I used background-size: contain; to make sure the two ladies stayed in view to keep them happy.

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