Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 10, 2016 at 7:14 pm #581318
    lzevon

    I read and was able to implement what I found on the following thread (to overlay an image on the fullscreen slider)…
    https://kriesi.at/support/topic/add-an-overlay-on-fullscreen-slider/

    … however, I’m having trouble making the image responsive (I want the logo to be much smaller in all layouts (Mobile portrait (320×480), Mobile landscape (480×320), Small tablet portrait (600×800), Small tablet landscape (800×600), Tablet portrait (768×1024) and Tablet landscape (1024×768)).

    I also note that the fullscreen slider image itself is not responsive and wonder why this isor what I can do to remedy it?

    Thanks!

    February 13, 2016 at 4:35 am #582609
    Rikard

    Hi lzevon,

    Sorry for the late reply, what code did you use? Please send us a temporary admin login so that we can have a closer look. You can post the details in the Private Content section of your reply.

    Thanks,
    Rikard

    February 16, 2016 at 3:11 am #583863
    lzevon

    You bet…

    Thx,
    Larry

    February 17, 2016 at 11:47 pm #585021
    lzevon

    bump – Rikard?

    February 21, 2016 at 10:42 am #586633
    Ismael

    Hi!

    Sorry for the delay. Set the image as background:

    .page-id-16 .avia-fullscreen-slider:after {
    content: '';
    display: block;
    z-index: 100000;
    position: absolute;
    height: 150px;
    width: 150px;
    background: url(/wp-content/uploads/2016/02/home-logo.png);
    background-size: 100%;
}

    Use css media queries to adjust the size of the container on smaller screens.

    Regards,
    Ismael

    February 22, 2016 at 5:15 pm #587292
    lzevon

    That works for the logo – thank you! For the background image, on vertical images the slider is not responsive. It is cutting off the children’s faces in the most awkward of places as you can see from the attached.

    The horizontal/landscape layouts appear to work well, but the vertical/portrait layouts are getting cut off?

    Thanks

    February 24, 2016 at 5:30 am #588126
    Ismael

    Hi!

    Since the background size property is set to cover, the background will cover the whole container but it will cut off parts of the images to keep its aspect ratio. The only workaround is to create another slider specifically made for mobile or adjust the background positioning by using css. 

    @media only screen and (max-width: 989px) {
.avia-fullscreen-slider .avia-slideshow>ul>li {
    background-position: center center !important;
}
}

    Best regards,
    Ismael

    February 24, 2016 at 5:17 pm #588525
    lzevon

    Perfect Ismael – thank you!

    February 26, 2016 at 1:09 pm #589723
    Andy

    Hi!

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Overlay responsive image on fullscreen slider’ is closed to new replies.