Avada Forums Community Forum Alignment of the featured image on a slide in fusion slider

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • hetbruist
    Participant
    Post count: 7

    Hi, I am using a full screen fusion slider om my website. But when I make my screen smaller in height the featured image of my slide will venter while the most important part of the image is on top. So I would like the top to be visible all the time. Is there a way to fix this? https://3r-interim.nl

    marklchaves
    Participant
    Post count: 873

    Hi,

    Thanks for supplying a link to your page. That helps a lot.

    Unfortunately, you’ve got multiple responsive design challenges ahead of you. A web dev with RWD (responsive web design) experience can fix all these issues in a couple hours or so. Where someone with little to no experience will struggle for days and may never solve it.

    The first thing I noticed, on my laptop is that your forehead is hacked off. Your hero image is 1500 x 951. And your putting it into a 1440 x 666 space. This is a recipe for unwanted cropping as you can see. It’s a common mistake for non web devs.

    After you fix that, you will have to supply proper image sizes for many of the popular devices out there in portrait and landscape mode (if you want your hero to show-up perfectly for every device). Then create CSS media queries for all the different screen sizes/devices/orientations. Then test everything on Chrome/Safari/Firefox/Opera for each device. This is a lot of work and way too much to explain in this forum.

    The good news is there are plenty of devs who can do this blindfolded. The better news is, if you have the motivation, there are plenty of classes (many are free), and guides on this RWD.

    I have a couple demos up on CodePen if you want to attempt the DIY approach (or see what I’m talking about). https://codepen.io/collection/AVMjjK/

    Best of luck!

    marklchaves
    Participant
    Post count: 873

    Quick follow-up. When I’m building a site for a client, I usually have a reference manual like Avada’s great doc on images. https://theme-fusion.com/documentation/avada/images/image-size-guide/

    Enjoy!

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