Tagged: , , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 30, 2015 at 6:11 pm #495498
    sosu_at

    Hi there,
    I love the theme so far! There’s just a couple of issues I still need to iron out:

    I’m using a masonry element to display a shop (as per your Masonry Shop Demo), which works fine(-ish) on desktop devices, but does not display correctly on mobile devices.
    Specifically: I need to hide the caption on mobile devices. I’ve set it to be visible on Mouse-Over, but it’s always visible on mobile devices and thus hides the images.
    I have tried the CSS you provided in this thread, https://kriesi.at/support/topic/how-to-disable-captions-on-images-in-masonry-gallery-on-a-mobile-device/ but it did not work. Might be because it’s not a masonry gallery but an element?!

    Also, there’s two related issues:
    1. On mobile devices: There is a shopping cart icon/button displayed next to the menu icon. How can I get rid of it? I’m using the shop as a catalogue and YITH WooCommerce Request A Quote to add quote functionality. The cart does not appear in the desktop version. I’m using the setting “Display Floating on the side, but only once product was added to the cart”.
    2. The caption (that I want to remove completely on mobile devices) is not displayed correctly in the desktop version either. The main issue is that when the text is too long, you can’t see the first couple of lines. I’d much rather not see the last lines. Is there a way to align the caption to the top?

    Please let me know if I should open separate threads for the other/related issues.
    Thank you!

    August 30, 2015 at 10:25 pm #495538
    Basilis

    Hey sosu_at!

    Can u show us screenshots of the areas u are referring, so we can try to understand the issue exactly?

    Also please list us an custom CSS u have added

    Regards,
    Basilis

    August 30, 2015 at 10:55 pm #495549
    sosu_at

    These are screenshots taken with an iPhone that show the caption covering the images:
    caption covering image on mobile device - 1
    Caption covering Image on Mobile Device - 2

    I’ve tried all of these Quice Code CSS solutions as per https://kriesi.at/support/topic/how-to-disable-captions-on-images-in-masonry-gallery-on-a-mobile-device/

    @media only screen and (max-width: 767px) {
.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0;
}}

    and

    @media only screen and (max-width: 767px) {
.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { display: none; }
}

    and

    @media only screen and (max-width: 767px) {
.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0 !important;
display: none !important;
}}

    But the captions still showed up on my iPhone. There’s also a solution for a Portfolio Grid element, would that work? Or is does the Masonry element need a specific solution?

    Here’s a screenshot of the shopping cart icon/button on a mobile device:
    Shopping Cart Icon on Mobile Device

    And finally here’s the caption text that I’d love to have aligned to the top of the Mouse-Over box (?):
    Caption on desctop - First lines not showing

    (edited to correct screenshots)

    • This reply was modified 9 years, 3 months ago by sosu_at.
    September 2, 2015 at 10:20 am #496951
    Andy

    Hi!

    try this code to hide your captions:

    @media only screen and (max-width: 767px) { 
.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image:hover .av-inner-masonry-content {
display: none;
}}

    Afterwards clear browser cache and refresh your site a few times.

    Regards,
    Andy

    September 2, 2015 at 1:05 pm #497047
    sosu_at

    Hi Andy,
    I tried the code, cleared the cache and refreshed as per your instructions but there’s no change. The captions are still displayed, covering the images.

    Any other recommendations or settings I could try?
    And do you have any recommendations on how to get rid of the shopping cart on mobile devices? That’s a real concern also.

    Thank you!

    September 3, 2015 at 7:10 pm #497920
    sosu_at

    Soooo…

    any other suggestions?
    I’d be happy to change the menu (or just this one menu item) for mobile devices, if that would be easier to accomplish.
    I’ve had a look at your tutorial for Changing the menu on mobiles, but I’m not exactly sure on where to insert the code because my /enfold/js/avia.js file looks slightly different.

    Thank you in advance for your help!

    September 6, 2015 at 8:46 am #498805
    Rikard

    Hi,

    Could you please provide us with a temporary admin login so that we can take a closer look? You can post the details in the Private Content section of your reply. Please make sure that you are running the latest version of the theme.

    Best regards,
    Rikard

    September 7, 2015 at 10:06 pm #499550
    sosu_at

    Hey Rikard,
    here’s the admin login for you.
    I’m working with a child theme, but the parent enfold theme is version 3.3.2. Since there are now updates showing up I’m assuming this is the latest version, yes?

    If you’re already in there, could you also make the captions top-aligned vs. bottom-aligned as they are now (when the captions are too long, you can’t see the first lines and I’d rather the last lines are cut off) if that’s possible? I’m talking about the same captions I want to get rid off in the mobile version, in the masonry element (Main Menu > page: “Module” on my site).

    Thank you for your help!

    September 9, 2015 at 10:42 am #500287
    Andy

    Hi!

    captions are gone for me on mobile. Could you fix it? Also cart icon is gone for me on mobile. Could you remove it already?

    Cheers!
    Andy

    September 9, 2015 at 1:11 pm #500366
    sosu_at

    Hi Andy,
    I found a fix for the cart issue in the forum that worked for me as well, but captions still show up on the three mobile devices I tested. Cache cleared and all. I was hoping you could/would take a look (since I was asked to provide temp admin access).

    And for the caption issue on on non-mobile devices/desktops? I there a way I can change the style the text or change the size of the box that pops up, so you could actually read the whole text?

    Thank you,
    Susanne

    September 11, 2015 at 11:54 am #501554
    Andy

    Hi!

    try this code to hide your captions on mobile:

    @media only screen and (max-width: 767px) { 
figcaption.av-inner-masonry-content.site-background {
display: none;
}}

    I hope this helps.

    Cheers!
    Andy

    September 11, 2015 at 12:01 pm #501557
    sosu_at

    Thanks Andy, this one worked!!

    Could you also help me with styling the caption (increasing the number of characters that are displayed, increasing the size of the box, making the text align to the top of this box, instead of the bottom etc.) as mentioned before?

    Thank you!

    September 11, 2015 at 1:29 pm #501610
    Andy

    Hi!

    try this code:

    figcaption.av-inner-masonry-content.site-background {
font-size: 10px;
width: 200px !important;
margin: -10px;
padding: 10px;
height: 200px;
}

    and adjust as needed.

    Cheers!
    Andy

    September 11, 2015 at 1:55 pm #501624
    sosu_at

    Thank you!
    For some reason the height and width didn’t work (box is still the same size as the thumb), but by adjusting font-size, line-height and marin, you can now read/see the whole text!

    September 11, 2015 at 2:34 pm #501650
    Andy

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

    Cheers!
    Andy

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