Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 4, 2014 at 3:59 pm #287239
    MKW270210

    Hi

    Just bought another Enfold license so this is my first time building from scratch with all the new features. I have added a fullwidth slider to the top of the home page but on tablet and mobile it crops the image from the right. But it scales down fine if I reduce my browser size. Am I doing something wrong?

    Thanks

    Mark

    July 4, 2014 at 4:34 pm #287266
    Yigit

    Hi MKW270210!

    You can add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
li.av-single-slide.slide-1.active-slide { background-size: contain; }}

    But it may duplicate the slide image. You can alternatively try removing fullscreen slider on mobile or with custom JS code, display another image when displayed on mobile device

    Best regards,
    Yigit

    July 8, 2014 at 11:52 am #288427
    MKW270210

    Hi Yigit

    Thanks but you were correct. On a tablet I had 2 images and on a phone in portrait I had the start of a third. It appears to be filling a pre-defined space. I have tried all three size options (no scaling, large and extra large) but non see to have any effect.

    I’ve never had this issue with the Advanced layer slider and it seems strange that we have to use custom JS (which I cannot do) to solve this. I have tried swapping this for a colour background with just the image and no other content but I have the same issue.

    Essentially all I want is to use parallax view in two locations on the home page and at the top of most other pages. But I need those images to be responsive. Is there a simple way of achieving this with another tool? See notes above for website address.

    Thanks

    Mark

    July 8, 2014 at 2:22 pm #288519
    Ismael

    Hey!

    Thank you for using the theme!

    Please add this on Quick CSS or custom.css:

    .avia-fullscreen-slider .avia-slideshow>ul>li {
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: no-repeat;
}

    Adjust the slider wrap when viewing on mobile devices:

    @media only screen and (max-width: 480px) {
.avia-builder-el-0.av-minimum-height-100 .container, .avia-builder-el-0.avia-fullscreen-slider .avia-slideshow {
height: 200px;
}
]

    Regards,
    Ismael

    July 8, 2014 at 3:41 pm #288559
    MKW270210

    Hi Ismael

    Thanks but it doesn’t seem to do anything. When centering the image in the fullscreen slider it is still being cropped left and right when viewed on a tablet or mobile in portrait. As you can see, it’s a picture of the team so I can’t have it cropped but to be honest, I don’t want any of the images to be cropped (as they are now on each page when viewed on smaller devices).

    Without really knowing what I’m doing I amended the ‘minimum-height-100’ and the ‘height: 200px;’ both independently and together but could see no change in the image size on a phone.

    Is there an alternative to gaining a parallax effect whilst easily maintaining the image dimensions?

    See website for current issue with your code in place as sent.

    ALSO – does parallax effect work on tablets and phones? I’m not seeing it.

    Regards

    Mark

    July 10, 2014 at 9:47 pm #289735
    Devin

    Hey!

    You can use the fullwidth slider instead of the fullscreen option. The fullscreen option must always be able to freely crop off a bit of the edges in order to work.

    And no, the “parrallax” setting doesn’t render well on mobile so its disabled. You can use Fixed instead which is very very similar but it doesn’t have any javascript offset.

    Regards,
    Devin

    July 11, 2014 at 3:40 pm #290138
    MKW270210

    But then I have no parallax effect with the full screen slider, which is what I need. I have tried this and the slider just scrolls up with the rest of the page.
    How can I achieve a parallax effect that is responsive? We’re not talking about cropping off ‘a bit’ of the edges. We’re talking about reducing it to about 25% of the original.

    NB – I have tagged this thread for email notification of replies but I am not receiving them.

    Thanks

    Mark

    July 13, 2014 at 3:49 am #290692
    Devin

    Unfortunately that just isn’t an option available with the theme. You could look into Revolution slider though I don’t know if it has that kind of functionality either.

    The fullscreen option is, by its nature, always going to need to crop off sections of the image (even significant portions of it) to keep it in proportion and with no whitespace on the edges.

    November 6, 2014 at 3:18 pm #347109
    limedrop
    This reply has been marked as private.
    November 6, 2014 at 9:57 pm #347404
    Yigit

    Hi!


    @limedrop     Can you please post the link to your website and a screenshot showing the changes you would like to make?

    Regards,
    Yigit

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