Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • March 6, 2019 at 9:26 pm #1075643
    Munford

    HI

    Searched but can’t find a solution –
    I’d like to have the titles in my masonry gallery on mobiles to be placed underneath the thumbnail image instead of as an overlay. Can you help me with this?
    Thanks
    Nancy

    March 11, 2019 at 3:47 am #1077187
    Ismael

    Hey Munford,

    Thank you for using Enfold.

    Use this css code to move the caption overlay underneath the image on mobile view.

    @media only screen and (max-width: 767px) {
#top #wrap_all .av-caption-style-overlay.av-flex-size .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    height: auto;
    width: auto;
    background: rgba(0,0,0,1);
}
}

    Best regards,
    Ismael

    March 11, 2019 at 10:46 am #1077250
    Munford

    Hi Ismael
    I tried that but its not working for me.
    I have the captions set to “default display”, titles only, but the titles on the mobile are still on top of the image. https://imgur.com/cNyeRGW
    Can you check this?
    thanks
    Nancy

    • This reply was modified 5 years, 8 months ago by Munford.
    March 11, 2019 at 3:32 pm #1077379
    Ismael

    Hi,

    Thanks for the update.

    You have to set the masonry’s “Element Title and Excerpt Styling” settings to “Default as centered overlay” in order for that css code to work.

    Best regards,
    Ismael

    March 11, 2019 at 3:42 pm #1077386
    Munford

    HI Ismael
    thanks – OK I did that and now I am seeing them as…..centered overlays.
    Not seeing them below the image. What am I setting wrong?
    best
    Nancy

    March 14, 2019 at 11:07 pm #1078917
    Munford

    still not fixed :(

    March 18, 2019 at 9:44 am #1079783
    Ismael

    Hi,

    Thank you for using Enfold.

    Did you check it mobile view? We would like to implement the changes but the previous login details are invalid. Please provide a new login account. Make sure that the Appearance > Editor panel is accessible.

    Best regards,
    Ismael

    March 18, 2019 at 12:00 pm #1079842
    Munford

    sorry try the login below

    March 19, 2019 at 6:23 am #1080223
    Ismael

    Hi,

    Thanks for the update.

    We adjusted the code a bit and placed it in the Quick CSS field. Please remove the browser cache prior to checking the page.

    Best regards,
    Ismael

    March 19, 2019 at 10:06 am #1080279
    Munford

    Hi Ismael

    Thanks for the changes. It looks better. I see that the captions are still overlying the images – it’s not crucial but is there a way to position them BELOW the images – so the whole photo shows?
    thanks for your help
    Nancy

    March 20, 2019 at 5:12 pm #1080924
    Ismael

    Hi,

    The test page is no longer available, so we can’t see the changes. Please bring it back so that we can inspect the items again.

    Best regards,
    Ismael

    March 20, 2019 at 6:11 pm #1080936
    Munford

    sorry it’s back online now

    March 22, 2019 at 2:37 pm #1081848
    Ismael

    Hi,

    We don’t know why, but the login page is not loading properly on our end. What is the login url?

    Best regards,
    Ismael

    March 22, 2019 at 2:58 pm #1081859
    Munford

    see below

    March 25, 2019 at 4:21 am #1082494
    Ismael

    Hi,

    That page doesn’t exist or is not found. Please provide a valid login url.

    Best regards,
    Ismael

    March 25, 2019 at 10:19 am #1082597
    Munford

    sorry its just the standard login

    March 27, 2019 at 12:57 pm #1083548
    Ismael

    Hi,

    We adjusted the css code a bit. The content container should now be positioned below the image.

    @media only screen and (max-width: 767px) {
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: -60px;
    display: block;
    height: auto;
    width: auto;
    background: #ffffff !important;
    text-align: center;
    opacity: 1;
}

.responsive #top .av-masonry-entry.post {
    margin-bottom: 60px;
}

#top .av-fixed-size .av-masonry-entry.av-masonry-item-no-image .av-inner-masonry-content-pos, #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos {
    display: block;
    text-align: center;
    margin: 0 auto;
}

#top .av-inner-masonry {
    overflow: visible;
}

#top .av-masonry-entry .av-masonry-entry-title {
    color: #000 !important;
}
}

    Best regards,
    Ismael

    March 27, 2019 at 1:17 pm #1083561
    Munford

    thank you but that is not working for me – the images cover the captions on most of them: https://imgur.com/AStE1oE.
    Looks like the padding between the items is not enough on the mobile but I can’t see which area to target.
    Can you help with this, or put the code back that was there before…it was OK and the site is live now so I don’t want to leave it up like this…
    thanks
    Nancy

    • This reply was modified 5 years, 7 months ago by Munford.
    March 29, 2019 at 12:32 am #1084341
    Ismael

    Hi,

    It seems to be adjusting properly when we change this code.

    .responsive #top .av-masonry-entry.post {
    margin-bottom: 60px;
}

    Remove the .post selector or replace it with following.

    .responsive #top .av-masonry-entry {
    margin-bottom: 60px;
}

    Screenshot: https://imgur.com/a/dCD2Zxn

    Best regards,
    Ismael

    March 29, 2019 at 1:37 am #1084363
    Munford

    thanks!

    March 29, 2019 at 3:00 am #1084389
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Masonry titles on mobile’ is closed to new replies.