Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 4, 2015 at 2:19 pm #468403
    stanyas

    Hello,

    There are my website: http://goo.gl/NbNHWz

    When i resize browser like phone or browse with my mobile device slider is not looking responsive i see just a hand :)

    How we can fix that problem? I need responsive image/slider

    July 5, 2015 at 10:13 am #468509
    Rikard

    Hi stanyas!

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply.

    Cheers!
    Rikard

    July 5, 2015 at 12:27 pm #468541
    stanyas

    That would be great Rikard. I prodive you my admin login info.

    July 6, 2015 at 1:44 pm #468889
    Andy

    Hi!

    use this code to display it 100% on mobile devices:

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

    Hope this helps!

    Regards,
    Andy

    July 14, 2015 at 9:48 am #472919
    stanyas

    Hello,

    I have a problem with banner mobile and desktop version.

    My banner dimention 1436×610 Banner

    It is my macbook’s very different and not fit. But windows 15″ is looking good..

    My macbook’s right side is cropped Screenshot Macbook

    Mobile banner is like that cropping image not looking fit I used your code but still same . I’ve added it on css/custom.css

    Please can you help me? (im sent login credentials please check)

    • This reply was modified 9 years, 3 months ago by stanyas.
    July 14, 2015 at 2:23 pm #473178
    Ismael

    Hi!

    You can set the background size to 100% but it will distort the image a bit. 

    .avia-fullscreen-slider .avia-slideshow>ul>li {
  background-size: 100% 100%;
  background-position: center center;
}

    The background size property is set to cover by default to keep the aspect ratio of the image.

    Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

    Best regards,
    Ismael

    July 14, 2015 at 3:16 pm #473225
    stanyas

    Yes this code is distort mobile it is looking very bad.

    But this page: http://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/?skin=Splash%20Blue

    When i resize browser like a mobile size background to resize it is looking good.

    What my slide size is wrong? Really im so confused

    July 15, 2015 at 1:44 pm #473716
    Andy

    Hi!

    on this page http://kriesi.at/themes/enfold/homepage/home-v7-one-page-portfolio/?skin=Splash%20Blue you can see some cropping as well of the background image when shrinking browser. So it behaves pretty much the same as on your website I think.

    However, you can try to work with media queries to define how your background image should behave on smaller devices. For example you could try to use this:

    @media only screen and (max-device-width: 736px) {
.avia-fullscreen-slider .avia-slideshow>ul>li {
height: 30%;
}}

    Best regards,
    Andy

    July 16, 2015 at 3:36 am #474058
    stanyas

    Hi @andy i’ve added your code on custom.css but i didn’t show any effect about mobile.. Can you check it?

    July 16, 2015 at 9:51 am #474128
    Andy

    Hey!

    please clear browser cache and hard refresh a few times.

    Cheers!
    Andy

    July 16, 2015 at 6:29 pm #474499
    stanyas

    Hi @Andy,

    I’ve do that more times refresh. But still same everything. Can i define for mobile browser different slider? I think if this possible would be great solution.

    July 17, 2015 at 9:36 am #474747
    Rikard

    Hey!

    Yes that might be a good solution to your problems, we can help you out hiding it with CSS if you should have the need for that.

    Best regards,
    Rikard

    July 17, 2015 at 1:02 pm #474888
    stanyas

    Hi @Rikard,

    Yes we can hide it with css for mobile but i need mobile compatible slider. If we hide it how to show slider for mobile size browser?

    July 17, 2015 at 1:16 pm #474905
    Andy

    Hey!

    then please build a second slider which we will only use for mobile device. Let us know when you are done and show us your results. Then we can provide you some CSS code to hide one for desktop/mobile.

    Cheers!
    Andy

    July 17, 2015 at 1:46 pm #474930
    stanyas

    Hi @Andy,

    Can i build slider in Enfold? There are two slider LayerSlider and FullScreen? Can you explain how can i do again? Sorry I’m a little confused.

    July 18, 2015 at 5:15 am #475206
    Rikard

    Hi!

    If you put another slider after the one you have now, and design it so that it looks good on mobile, we can then hide it for all sizes except mobile and vice versa with the first slider. I think that would be a good option.

    Cheers!
    Rikard

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