Topic Resolution: Resolved
  • Closed
  • Sunny Agarwal
    Spectator
    April 18, 2015 at 1:19 pm #16539

    I am using theme4slider on the wide layout of alora theme but my images doesnt adjust on the mobile. I see half images only and I am unable to scroll when on the mobile to see the complete image. Suggest me how can I fix this.

    Sunny Agarwal
    Spectator
    Posts: 44
    April 18, 2015 at 6:28 pm #16566

    no doesnt work

    Roman
    Spectator
    Posts: 3147
    April 19, 2015 at 9:36 am #16582

    try this yet:

    @media only screen and (max-width: 768px) {
    .t4p-slider .background-image {
    background-size: contain;
    background-position: 50% 0%;
    }
    }

    Sunny Agarwal
    Spectator
    Posts: 44
    April 19, 2015 at 9:45 am #16586

    Perfect works great on mobile and tablet. Can I have a similar solution for my slider images on the laptop also, right now when I see my images on laptop they seem to cut a bit.

    Roman
    Spectator
    Posts: 3147
    April 19, 2015 at 9:58 am #16594

    it’s because standard mobile devices have resolution about 768px and probably your laptop is now using this resolution. you could decrease the value to lower to see if it works fine for you

    Sunny Agarwal
    Spectator
    Posts: 44
    April 19, 2015 at 10:03 am #16597

    Yeah, I tried decreasing the value but didnt work. I am talking about the images on this page – http://fotoscenen.se/ If you view them on mobile or tablet you get the complete image but if you view on laptop you dont get the complete image.

    Roman
    Spectator
    Posts: 3147
    April 19, 2015 at 10:57 am #16603

    then use only:

    .t4p-slider .background-image {
    background-size: contain;
    background-position: 50% 0%;
    }

    but then it will not be displayed full width on the desktops

    Sunny Agarwal
    Spectator
    Posts: 44
    April 19, 2015 at 11:06 am #16606

    i want the full size on desktops i dont understand why it cuts on desktops

    Roman
    Spectator
    Posts: 3147
    April 19, 2015 at 11:28 am #16612

    because now it uses background-size: contain; rule in the CSS, as you wanted to display the slides on mobiles with actual width. as I mentioned before, try decrease size of the CSS max-width rule, for example:

    @media only screen and (max-width: 500px) {
    .t4p-slider .background-image {
    background-size: contain;
    background-position: 50% 0%;
    }
    }

Viewing 8 replies - 11 through 18 (of 18 total)