Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 14, 2024 at 1:22 pm #1434296
    cloud_studio1

    Hi, I am using Masonry Gallery. I set the column ( Masonry > Styling > Columns ) on desktop to 3 columns and it’s working great but when I open the website on my iPad it doesn’t look nice at all. The largest media query I can set for column is desktop ( 990px+ ) and I think I need it to be 990px – 1920px ( large ), 1920px+ ( desktop ) so I can set 1 column for large and 3 columns for desktop.

    Is there any solution or workaround ?

    Thank you so much
    Chatawat L.

    February 15, 2024 at 4:38 am #1434361
    Ismael

    Hey cloud_studio1,

    Thank you for the inquiry.

    Have you tried adjusting the Masonry element’s Styling > Columns > Column count settings? You can select different number of columns for each breakpoint.

    Best regards,
    Ismael

    February 15, 2024 at 6:21 am #1434364
    cloud_studio1

    Hi Ismael,

    Thanks for your reply.

    Yes, I already tried column adjustment as you suggested but the problem is when I set 3 columns setting for desktop breakpoint ( 990px+ ). It looks nice on my pc but it doesn’t on iPad. As you can see the iPad screen in the link I attached. It’s much better with 1 column setting on iPad screen but gallery thumbnail for 1 column setting is way too large for pc screen.

    I think to resolve this. I need to set another breakpoint for 1920px+ so I can set 3 columns for 1920px+ and 1 column for 990px – 1920px but I don’t know how to do it.

    Regards,
    Chatawat L.

    February 16, 2024 at 2:26 am #1434466
    Ismael

    Hi,

    Thank you for the info.

    Are you trying to break the items into a single column on iPad view? If so, then you can add this css code to manually adjust the width of the masonry items on larger tablet screens.

    @media only screen and (min-width: 990px) and (max-width: 1366px) {
  .responsive #top .av-masonry .av-masonry-entry {
    width: 100%;
  }
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

    Best regards,
    Ismael

    February 16, 2024 at 6:24 am #1434470
    cloud_studio1

    Hi Ismael,

    Thanks for your reply. Here is what I did.

    1. I put your code into Appearance > Customize > Additional CSS and published > not working.
    2. I go to front-page and then Masonry > Styling > Column and change the column of desktop ( 990px ) back to default and update
    3. I works like a charm ! I can change max-width to fit my needs later.

    I have 2 more questions about this.

    1. If I put your css code into custom.css and purge all cache. Why custom.css not loaded to client when refreshed ?
    2. Now I changed the max-width to 1365 for iPad screen in horizontal and I found there is an empty space below ( at the bottommost red rectangle as in attached image link ). Is there any way around to expand the masonry gallery’s height to min-height of screen height ?

    Thank you so much

    Chatawat L.

    February 17, 2024 at 5:34 pm #1434585
    Mike

    Hi,
    Thanks for your patience, about your question as to why your client is not seeing the updated css after the site cache has been cleared, since your client is checking on an iPad, they will also need to clear there cache, note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    February 17, 2024 at 7:06 pm #1434602
    cloud_studio1

    Hi, Mike

    Thank you for your reply.

    For the custom.css issue that I asked. Actually I don’t see it transferred in browser’s Developer Tool > Network at all or do I need to set it somewhere in wordpress to let the custom.css transfer to the client ? I tried opening website in private mode as well but no difference.

    For clearing cache that you advised. I already cleared those caches and I also deactivated plugins about caching then I finally also tried opening the website in private mode. I still don’t see it transferred.

    Please don’t forget another question about filling the bottommost empty space as in attached image link in my previous reply.

    Regards,
    Chatawat L.

    P.S. I found some issue about this forum that is not relevant to this thread but you might need to know. When I got a notification e-email that you replied me. I followed the link in the e-mail to this thread “on iPhone’s Safari” but it informed me that I need to login first in order to reply. So I logged in and came back to this thread. I scrolled down to the reply box but it still informed me that I haven’t logged in. I logged in again for the second time, came back to the thread but still nothing different. FYI, this only happens on iPhone’s Safari. I also tried Bing but same issue. On iPad and on my Mac Studio it works fine.

    February 18, 2024 at 2:08 pm #1434645
    Mike

    Hi,
    Is custom.css a file that you added? If it is a theme file and you have enable Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression then it is combined. I recommend using the Enfold Theme Options ▸ General Styling ▸ Quick CSS field or the WordPress ▸ Customize ▸ Additional CSS if these are not working for you then you may have an error or a missing bracket.

    Perhaps we are getting side tracked, above you write that the css is not working but I don’t see a like to your site, please link to your site so we can help you with the css.

    Best regards,
    Mike

    February 18, 2024 at 4:13 pm #1434666
    cloud_studio1

    Hi Mike,

    Thanks for replying. You may close this thread.

    Regards,

    Chatawat L.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Need more media query’ is closed to new replies.