Home Forums Community Forum Fusion slider 100% of picture, not cutting away in mobile view.

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • strangefinder
    Participant
    Post count: 9

    As you can see, in normal view all women are visible
    https://www.baeuchlings.de/
    if you switch to mobile the left and right woman are
    cutted away.
    how can i avoid this.
    the left and right women are angry about this!
    thx an regards

    ballu
    Participant
    Post count: 5

    Yes I see.
    Try to add this line in Avada custom CSS:

    @media screen and (max-width: 800px){
    .home .tfs-slider .background-image {background-size: contain!important;}
    }

    I think that’s good
    Gianluca

    marklchaves
    Participant
    Post count: 673

    I agree with Gianluca.

    Here’s what I came up with. [See live demo on CodePen https://codepen.io/marklchaves/pen/yWZZQa]

    /*
     * Switch background image to contain with
     * a fixed height for small devices.
     */
    body { 
      background-image: url("https://www.baeuchlings.de/wp-content/uploads/2019/01/RS_20160403_GS_20160403_DSC06050-Edit.jpg");
      background-repeat: no-repeat;
      background-size: contain;
      height: 200px;
    }
    
    /*
     * Keep background image at cover for
     * medium to large devices.
     */
    @media only screen and (min-width: 400px) {
      body {
        background-size: cover;
      }
    }
    strangefinder
    Participant
    Post count: 9

    “I think that’s good
    Gianluca”

    >>>oh yes.


    @marklchaves

    yes but i kept the fusion slider with text on it.

    thanx all for you kind help
    and regards from germany,
    reinhard

    marklchaves
    Participant
    Post count: 673

    Hi @strangefinder,

    Yes. Of course. I didn’t mean in any way to replace your code with mine. Sorry that wasn’t clear.

    Just using Gianluca’s suggestion in a stripped-down demo version to give it context in a working prototype.

    Best of luck! 🙂

    avaliyn
    Participant
    Post count: 1

    So I tried both of those codes myself (delphinusdesigns.com) and it optimized it for desktop, however not for mobile. On mobile, it still cuts everything off. Any ideas?

    marklchaves
    Participant
    Post count: 673

    Hi @avaliyn,

    Thanks for the link to your site. Because your slider image’s main two subjects are justified far right, I recommend creating one or two more versions of the image so they aren’t cut-off. I typically work with two versions (one for mobile and one for landscape/laptop/desktop).

    In your case, I think you might need three (minimum) because the main subjects are so close to the right edge of the display area: 1) laptop/desktop (you already have this, but it needs to be compressed down to 200KB or so), 2) small hand held like Samsung and iPhone in portrait mode, and 3) tablet in portrait mode.

    Also, optimising your images (using proper scaling and small file sizes) is the way to go. Your slider image is about 3MB (total page size is 21MB). And, your page is taking about 50 seconds to fully load (via GTmetrix test).

    Here’s my attempt to make your slider more responsive. Note: I used five images to try to cover as many breakpoints as possible.

    https://marklchaves.com/responsive-slider-demo/

    Use your Chrome or Firefox dev tools to inspect the different viewports/breakpoints and image dimensions I used.

    Hope that helps!

    P.S. You should also think about getting your site on SSL as soon.

Viewing 7 posts - 1 through 7 (of 7 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.