Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 2, 2021 at 4:47 pm #1297797
    sitesme

    Hello,

    We are using a Masonry Gallery and we are specifying the number of columns for each device.
    However, the Tablet Portrait is the only one that is not working. I am assuming that newer iPads are probably larger than 767px, therefore, it ignores those columns.

    This is the setting: https://dns.d.pr/B5B9AH/1XTwymUjZp – I am trying to get 1 column, but I keep seeing 3 columns (like the tablet landscape mode is set).

    Is there any solution for this?

    Thank you

    May 3, 2021 at 2:31 pm #1298008
    Yigit

    Hey,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
@media only screen and (max-width: 1024px) {
.av-masonry-col-3 .av-masonry-entry {
    width: 100%;
}}

    Best regards,
    Yigit

    May 3, 2021 at 2:37 pm #1298011
    sitesme

    Hi Yigit,

    That didn’t work. On iPad vertical, I still see 3 columns, when I set it as 1 column in Enfold – like we have it on mobile.
    On iPad Horizontal it should be 3 columns (and it is fine).

    May 3, 2021 at 2:44 pm #1298014
    Yigit

    Hi,

    Have you cleared cache on your mobile browser? 1024px should target portrait mode of the largest ipad. Also, please try the code with !important rule as following

    @media only screen and (max-width: 1024px) {
.av-masonry-col-3 .av-masonry-entry {
    width: 100% !important;
}}

    Best regards,
    Yigit

    May 3, 2021 at 3:01 pm #1298024
    sitesme

    Thank you Yigit! :)

    Adding !important fixed it.

    However, the images are not taking all the space of the screen (from left-to-right) like they do on mobile with 1 column. Is it possible to force them this way?

    May 3, 2021 at 3:05 pm #1298026
    Yigit

    Hi,

    Please change the code to following one :) 

    @media only screen and (max-width: 1024px) {
.av-masonry-col-3 .av-masonry-entry {
    width: 100% !important;
}
.av-masonry-image-container img {
    width: 100%;
}}

    Cheers!
    Yigit

    May 3, 2021 at 3:36 pm #1298033
    sitesme

    Thank you, my CSS master aka Yigit :)
    Spot on, it all worked perfectly, but there are three issues:

    1. The code above is now applying to all masonry galleries across the whole website. Like, the homepage, we would like to keep it with 3 columns, but this code forces them to 1 column only. Perhaps we can keep that code and add a custom ID attribute? Or even better… find a code that will allow Avia Builder to work as expected: 1, 2, 3 or 4 columns for example? It seems the iPad on Portrait is the one that is not working by default (bug?)

    2, The page is flickering when it loads. Probably the image resizing? Page URL in private.

    3. A different topic, but kind of related.
    Because we are showing one column, the featured images from the portfolio are kind of zoomed and their quality is poor.
    I guess this is because the theme is loading a smaller image size (thumbnail or similar). Is there a way to display a better quality image? I guess this is related to the size we set for thumbnails, etc. under WordPress settings but I’m not sure.

    I am sending you the pages in private.

    Thank you

    • This reply was modified 3 years, 6 months ago by sitesme. Reason: One more issue found
    May 3, 2021 at 4:19 pm #1298050
    Yigit

    Hey,

    You are welcome!

    1- Which browser and device are you experiencing this issue? I checked your page on Firefox, Chrome, Safari and Opera however it does not flicker on my end.

    2- It is loading cropped version of the images however that is not the case on my local installation. Have you chose full sized images when creating your gallery? If you are, could you please use this plugin – https://wordpress.org/plugins/simple-image-sizes/ and increase the size of “masonry” image sizes and regenerate thumbnails?

    Regards,
    Yigit

    May 3, 2021 at 4:26 pm #1298057
    sitesme

    Hi Yigit, Sorry I edited my last comment and changed the numbered paragraphs before your reply.

    1. The code applies now to all masonry gallery elements across the whole site. you please check my comment above?

    2. I removed the code because of the problem above, this is probably why you couldn’t see it, sorry! I added the code back so you can replicate from your end. It is only when the images are all in 1 column now.

    3. I will try this.

    Thank you

    May 3, 2021 at 4:51 pm #1298062
    Yigit

    Hi,

    1- Please edit Masonry Gallery elements you would like to target and give them a custom ID in Advanced > Developer Settings (“custom-mas” in example below) and change the code to following one 

    @media only screen and (max-width: 1024px) {
#custom-mas .av-masonry-col-3 .av-masonry-entry {
    width: 100% !important;
}
#custom-mas .av-masonry-image-container img {
    width: 100%;
}}

    2- Thanks for the screen cast. I could reproduce the issue on Firefox. It seems like choosing a column count instead of Automatic causes the issue. Unfortunately I do not have a quick solution for that. I will check with my teammates as well :)

    Best regards,
    Yigit

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