Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 19, 2015 at 1:38 am #461644
    djshortkut

    I have a couple of issues I need help with on my masonry gallery.

    1. You helped me center the title & caption on my site with the code below. It worked great except I noticed that when I pull the site up on my iPad it is still to the left. (see images) Can you provide additional quick css to center the text on my iPad in landscape and portrait mode please? `.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
    text-align: center;
    }`

    2. I noticed if I have “display on mouse hover” selected for my masonry gallery the images appear “squished” than if I select “always display” Can you provide with some quick css to make the masonry gallery images on my iPad and iPhone not look “squished” and appear like they do when “always display” is selected? I have provided images to show what I am talking about.

    3. On the right hand side of my masonry gallery I have a 1px gap (see attached image) Can you give me some quick css to remove?

    Thank you in advance!

    June 19, 2015 at 4:18 pm #462029
    Andy

    Hi djshortkut!

    1.) Just use media queries for iPad:

    @media only screen and (max-device-width: 1024px) {
.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
text-align: center;
}}

    2.) Are you talking about the zooming effect of the masonry gallery? if you refer to this post:
    https://kriesi.at/support/topic/disable-the-image-zooming-and-highlight-effect-on-portfolio-images/#post-387079

    3.) I can’t see any gap on the right side when opening your website (Safari, Chrome). Which browser version are you using? Please clear browser cache and refresh a few times. Try on another computer as well.

    Best regards,
    Andy

    June 19, 2015 at 4:50 pm #462048
    djshortkut

    1. This code with the media query did not work. It still shows the text to the left. I’m wondering if this has to do with the code being for the hover effect but since the caption & title are always displayed on the iPad, the code has to be tweaked?

    2. If you compare both of the images I attached from my iPad side by side you’ll see that the size of the image is smaller when “display on mouse hover” is selected instead of “always display” I’m not sure it has anything to do with the zooming effect since this effect doesn’t work on mobile devices. The issue is only happening on my iPad and iPhone but doesn’t look good at all and looks like it’s getting cut off. It works great on a computer. Hope this make sense. I guess the other option could be to remove the caption and title from displaying on iPad screen size and smaller if there is no way to fix the way I am saying.

    3. I am using a 21.5″ iMac screen size with Safari but it also happens in other browsers like Firefox. I had this happen once before and you guys provided me with some quick css to remove the gap but now it isn’t working. When you pull it up on smaller screen sizes it doesn’t have this issue. I believe this was the original code I was given.

    @media only screen and (min-width: 1800px) {
.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry {
width: 16.64%;
}
}
    June 22, 2015 at 10:12 am #462523
    Andy

    Hey!

    1.) I don’t have an iPad, but on http://ipadpeek.com/ it is showing centered for me:

    Please clear your browser cache and refresh a few times.

    2.) Do you mean you want to change position of the caption titles? If yes you can control it using this code:

    figcaption.av-inner-masonry-content.site-background {
top: 275px;
}

    3.) I am using a Mac book pro 15”, but try to play around with a different value for the width in your code. Also you can try to add an !important:

    @media only screen and (min-width: 1800px) {
.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry {
width: 25%; !important
}
}

    Hope this helps.

    Regards,
    Andy

    June 27, 2015 at 3:55 am #465162
    djshortkut

    Thanks Andy. None of that worked.

    1&2. Can you give me some quick css to simply remove the title and caption on iPad screen size and smaller? That should take care of the main issue I’m having.

    3. On my MacBook Pro 15″ it shows up fine as well, it only starts to have the 1px gap on the right hand side when the screen gets larger than that. I tried adjusting the percentage and adding !important in and it didn’t help. Do you have another way to fix this?

    Thank you!

    June 27, 2015 at 4:02 am #465164
    djshortkut

    I figured out #3. I had to change the code to 4 columns since that is what I am using. `@media only screen and (min-width: 1200px) {
    .responsive.html_stretched .av-masonry-col-4 .av-masonry-entry {
    width: 25%; !important
    }
    }`

    Now I just need help with #1&2 below

    1&2. Can you give me some quick css to simply remove the title and caption on iPad screen size and smaller? That should take care of the main issue I’m having.

    June 30, 2015 at 10:10 am #466264
    Andy

    Hi!

    use this code to hide captions on iPad:

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

    Best regards,
    Andy

    June 30, 2015 at 5:05 pm #466567
    djshortkut

    Thank you Andy, you can close this thread.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Masonry Gallery Issues’ is closed to new replies.