Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 3, 2017 at 2:59 am #786836
    tremblayly

    Hi
    When i look at my slider on this page: https://www.impactcrescendo.com/releve
    On my iPad vertically:
    1) If I just flipped from the horizontal position, I need to refresh the page to see the caption. It does not show the caption automatically
    2) If I just flipped from the vertical position, I also need to refresh to see the caption.
    3) In viewing the the vertical position, the image displays the person on the left. However, when viewing the page horizontally, the image gets flipped and the man is now on the right

    I have created two sections on my page and created the following CSS code to display or hide one section if on the desktop or a mobile device like this:
    /* alternate Releve slider image for mobile devices */
    @media screen and (max-width: 1024px) {
    .releve-slider-desktop { display: none !important; }
    .releve-slider-mobile { display: block !important; }
    }
    @media screen and (min-width: 1024px) {
    .releve-slider-desktop { display: block !important; }
    .releve-slider-mobile { display: none !important; }
    }

    I don’t understand why the image gets flipped and the screen needs to be refreshed to see the caption.

    Hope you can help resolve this strange issue

    Thanks
    Lyse

    May 3, 2017 at 4:44 am #786862
    tremblayly

    Hi
    I realized I have the id entered incorrectly (I had entered a “.” instead of a “#” before), so here’s the revised code:

    /* alternate Releve slider image for mobile devices */
    @media screen and (max-width: 1024px) {
    #releve-slider-desktop { display: none !important; }
    #releve-slider-mobile { display: block !important; }
    }
    @media screen and (min-width: 1024px) {
    #releve-slider-desktop { display: block !important; }
    #releve-slider-mobile { display: none !important; }
    }

    But this change seem to have caused both of these to display now…

    Where did I go wrong?

    Thanks
    Lyse

    May 3, 2017 at 7:39 am #786950
    Rikard

    Hi,

    Please try this instead:

    @media only screen and (min-width: 1024px) {
#releve-slider-desktop {
  display:block !important;
}
#releve-slider-mobile {
  display:none !important;
}
}

@media only screen and (max-width: 1023px) {
#releve-slider-desktop {
  display:none !important;
}
#releve-slider-mobile {
  display:block !important;
}
}

    Best regards,
    Rikard

    May 3, 2017 at 2:48 pm #787163
    tremblayly

    Hi RIkard,

    That didn’t change anything.

    Thanks
    Lyse

    May 3, 2017 at 3:58 pm #787218
    tremblayly

    ….actually the only change is that the mobile image is now at the top and the desktop one is below. So it just flipped these

    May 4, 2017 at 3:09 am #787512
    tremblayly

    Hi Rikard,

    Fixed my issue. I added #top in front of the class and it works now.

    I do have one issue and that’s when I flip to horizontal, I have to refresh the page to see the caption. Any ideas on this one?

    My client wants to go live by end of today/night. Any changes to get this issue resolved before?

    Thanks
    Lyse

    May 4, 2017 at 5:40 am #787578
    Ismael

    Hi,

    Please try this css code.

    .avia-caption-content {
    visibility: visible !important;
}

    You can put it inside the css media query for mobile.

    Best regards,
    Ismael

    May 4, 2017 at 4:37 pm #787932
    tremblayly

    Hi Ismael,

    This is how I added the suggested code and it does not fix the issue. I still need to refresh to see the caption (only on the ipad)
    @media screen and (max-width: 1024px) {
    #top .releve-slider-desktop { display: none !important; }
    #top .releve-slider-mobile { display: block !important;}
    .avia-caption-content { visibility: visible !important; }
    }
    @media screen and (min-width: 1024px) {
    #top .releve-slider-desktop { display: block !important; }
    #top .releve-slider-mobile { display: block !important;}
    .avia-caption-content { visibility: visible !important; }
    }

    Thanks
    Lyse

    May 4, 2017 at 6:31 pm #787996
    tremblayly

    Hi Ismael,

    It works! Thank you so much.

    Lyse

    May 5, 2017 at 6:18 am #788197
    Rikard

    Hi Lyse,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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