Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 22, 2020 at 10:09 am #1215187
    AmelC

    Hello,

    I have a question regarding mouse over the images and title display. When I view my web page via desktop pc wether it be mac or a pc then it works just as expected, means when I move the mouse over the image than title is displayed in the middle of the image but when I view this web page from a mobile phone title is being displayed over the image all the time, is it possible to make this to be same for mobile phones/tablets as well ?

    Thank you
    Best regards
    Amel

    May 24, 2020 at 6:32 am #1215637
    Rikard

    Hey Amel,

    It’s not possible unfortunately, since there is no hover on mobile.

    Best regards,
    Rikard

    May 25, 2020 at 1:51 pm #1216126
    AmelC

    Hello,

    what ??? may I ask why is this ?? for what reason ? such a nice theme on desktop does not work on the mobile phone ?
    I also noticed that header image does not appears nice on a mobile/tablet devices… any way to fix this issue ? Yes I may call it issue as this should be
    a part of the theme, todays responsive themes should work on all devices … don´t you agree ?

    thank you for the reply

    Best regards
    Amel

    May 25, 2020 at 6:58 pm #1216234
    Victoria

    Hi Amel,

    It’s a device limitation, not the themes’. Please have a look at this article:

    How to deal with :hover on touch screen devices

    Best regards,
    Victoria

    May 26, 2020 at 2:55 pm #1216505
    AmelC

    Hello,

    but can you than explain me why this works for other Enfold layouts ? because in other layout on the desktop when I move the mouse over the image it animates either greyes out or pops up depending on the setup but on the mobile phone the image is displayed nice and clean not greyed out not poped up as it is on the desktop pc when I move the mouse over but displayed as a normal image… how can this work than ?

    But is it possible to reconfigure the it so I make one theme for mobile devices tablets etc.. and one for desktop then I can configure the server to send the traffic that came from mobile devices to mobile based site where all “hover” are disabled and the traffic directed from desktops redirect them to desktop based theme which is normal and keeps the hover functions ?

    thank you
    Best regards
    Amel

    May 28, 2020 at 9:59 am #1217287
    AmelC

    btw, can this internal linking using # be used on all enfold examples ? if yes than I can go away from this layout and use another one from the demos …
    which I know may work fine on both desktop and mobile devices…

    Best regards
    Amel

    June 2, 2020 at 5:27 pm #1218815
    Ismael

    Hi,

    mobile phone the image is displayed nice and clean not greyed out not poped up as it is on the desktop pc when I move the mouse over but displayed as a normal image… how can this work than ?

    Sorry for the confusion. The image overlay is set to only display on mouse hover, but since there is no “hover” state on mobile or touch device, and you can’t use a mouse obviously, the overlay has to be displayed automatically on page load. I hope that’s clear enough.

    If you want, we can completely disable the overlay on mobile devices so that the image is fully visible. Please add this code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
    .image-overlay { 
        display: none !important; 
    }
}

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    June 3, 2020 at 9:59 am #1218991
    AmelC

    Hello,

    ok will do, but is there any point to write a new thread for this last question here below ? since it is related ?
    Here is the css code I do have from before on:

    img.mfp-img {
  padding: 0 !important; 
  margin: 40px auto !important; 
  border: white 1px solid !important; 
}
.mfp-bottom-bar {
  margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
  top: -35px !important; 
}
html {  
  background-color:  #FFFFFF !important 
}

    and here is the code you send me in previous post to prevent hover on mobile devices

    @media only screen and (max-width: 767px) {
    .image-overlay { 
        display: none !important; 
    }
}

    and here below is the results after I added your css on to my existing but it still do not prevents hover on mobile phone, perhaps something is wrong in the syntax in the code below?

    img.mfp-img {
  padding: 0 !important; 
  margin: 40px auto !important; 
  border: white 1px solid !important; 
}
.mfp-bottom-bar {
  margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
  top: -35px !important; 
}
html {  
  background-color:  #FFFFFF !important 
}
@media only screen and (max-width: 767px) {
    .image-overlay { 
        display: none !important; 
    }
}

    thank you

    Best regards
    Amel

    June 8, 2020 at 9:21 am #1220397
    Ismael

    Hi,

    Are you using the Image element? Try to replace this css:

        .image-overlay { 
        display: none !important; 
    }

    .. with:

    .avia-image-overlay-wrap .av-image-caption-overlay {
	display: none !important;
}

    Best regards,
    Ismael

    June 8, 2020 at 10:10 am #1220416
    AmelC

    Hi again Ismael,

    I have just added the code you provided me and here is the complete css code I have in this theme but it still does not work for mobile phone as I still see the overlay in mobile..

    img.mfp-img {
  padding: 0 !important; 
  margin: 40px auto !important; 
  border: white 1px solid !important; 
}
.mfp-bottom-bar {
  margin-top: 10px !important; 
}
div.avia-popup .mfp-close {
  top: -35px !important; 
}
html {  
  background-color:  #FFFFFF !important 
}
.avia-image-overlay-wrap .av-image-caption-overlay {
	display: none !important;
}

    and yes I am using this layout on the Enfold theme:
    https://preview.themeforest.net/item/enfold-responsive-multipurpose-theme/full_screen_preview/4519990?_ga=2.239805696.286984834.1591603803-2026894044.1581360483

    Thank you!
    best regards
    Amel

    June 8, 2020 at 2:05 pm #1220466
    AmelC

    BTW it is Masonry Gallery element… and CSS code is added in General Styling section at the bottom..

    Best regards
    Amel

    June 9, 2020 at 9:41 am #1220790
    Ismael

    Hi,

    Thank you for the info.

    For the masonry gallery, you can use this css code.

    @media only screen and (max-width: 1024px) {
     .av-inner-masonry-content {
	display: none !important;
     }
}

    Please don’t forget to toggle the Performance > File Compression settings after adding the code, or just disable it temporarily while you’re building the site.

    Best regards,
    Ismael

    June 10, 2020 at 9:03 am #1221107
    AmelC

    Hello again Ismael,
    now it works just fine as expected! thank you for the reply and you can go ahead and close this thread.

    Thank you
    Best regards
    Amel

    June 11, 2020 at 6:05 am #1221519
    Rikard

    Hi Amel,

    Great, I’m glad that Ismael could help you out and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘mouse over and image title’ is closed to new replies.