Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 17, 2015 at 11:04 pm #397879
    infobahncreative

    Dear Kriesi

    Further to your help by Rikard the other day, I have the client report that the front page of their site is not displaying properly on an iPad.

    The coding R gave me worked perfectly on my main PC, but looks like this on the iPad. I have an image if I can send it to you.

    Any thoughts?

    Regards,

    Ali

    February 18, 2015 at 8:23 am #397980
    Rikard

    Hey infobahncreative!

    Could you post a link to your previous topic? I can’t seem to find it…Also, please link to the site in question and what the problem is in more detail. You can upload your image to for instance imgur.com or a public dropbox folder and then link it here.

    Cheers!
    Rikard

    February 18, 2015 at 11:56 am #398032
    infobahncreative
    This reply has been marked as private.
    February 19, 2015 at 1:02 am #398572
    Andy

    Hey!

    you did not tell us how you want it to look like on iPad, so I can just assume a layout:

    .av-image-caption-overlay-position {
top: 0px;
}
.av-image-caption-overlay {
top: 0px;
height: 98px !important;
}

    Adjust it as needed.
    If you wish something else, then please send us a mockup of what you want to achieve.

    Cheers!
    Andy

    February 19, 2015 at 10:02 am #398735
    infobahncreative

    Dear Andy

    Thanks for coming back to me.

    The effect I am after is correct as per my conversation and coding that Rikard gave the other day:

    https://kriesi.at/support/topic/i-need-a-transarent-box-behind-the-caption-on-an-image/

    In other words the text on the image box is centralised and with the transparent box behind.

    Am I correct in thinking that this piece of custom code will not work on other devises – e.g. an iPad or iPhone.

    The code you kindly gave me in your last post removes the transparent box and off centres the text.

    Regards,

    Ali

    February 20, 2015 at 5:56 am #399446
    Rikard

    Hey Ali!

    Try to add the following code to Quick CSS: 

    @media only screen and (min-width: 768px) and (max-width: 959px) {
.av-image-caption-overlay {
bottom: 15px !important;
left: 0% !important;
transform: translate(0%) !important;
}
}

    Cheers!
    Rikard

    February 20, 2015 at 1:29 pm #399592
    infobahncreative

    Hi Rikard

    Thanks for this.

    Can I just confirm the above coding has the second bracket at the end – code not working.

    Regards,

    Ali

    February 21, 2015 at 11:36 am #400031
    Ismael

    Hi!

    The caption overlay looks fine when I checked it on smaller screens. Can you please provide a screenshot of the issue? Yes, css media queries should have that bracket.

    Regards,
    Ismael

    February 21, 2015 at 11:45 am #400035
    infobahncreative

    Dear Ismael

    Thanks for coming back to me.

    I had a play with the coding – dropping the last bracket that changed the size of the image box.

    I have spoken with the client and explained there might be an issue on other devices with some of this coding and they are happy to run with the default image box settings.

    Thank you as ever to all at Kriesi for all your help – keep up the good work.

    You can mark this thread as resolved.

    Regards,

    Ali

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Image box text not displaying on an iPad’ is closed to new replies.