Okay
  Public Ticket #2695361
Masonry layout gallery displays differently on different browsers
Closed

Comments

  • RanebrookZina started the conversation

    Hello

    My gallery displays differently in different browsers. On Chrome it looks the way I want it to have - 3 columns, full width. But on all other browsers - Edge, Opera, Firefox it's only 2 columns. I attach the screenshots. 

    How could I change it to be displayed the same on all browsers, please? When I change the layout to 3 columns, I get the white sides of the container, but I would like to keep it fullwidth. Just to add, the row setting is set to full width. Please could you advise? 

    Attached files:  Chrome.png
      Other.png

  •  1,569
    Andrew replied

    Hi There,

    Please confirm that your salient theme(latest v12.1.6)  and wpbakery (latest v6.4.2) are up to date. 

    Thanks.

  • RanebrookZina replied

    I can confirm, that WP bakery is 6.4.2 and we updated the theme not long ago too (v12.1.6).

  •  5,495
    Tahir - SUPPORT replied

    Hey Again,

    Please publish the page and then check as from the screenshot it seems you are Previewing the page in Chrome and loading the saved version in the other browsers.

    Thanks 

  • RanebrookZina replied

    Hi Tahir

    The page was published when I made the screenshots. I just wasn't logged out. Here a the screenshots from today. The gallery looks the same as before - on Chrome it looks OK, on all other browsers - no. 

    Attached files:  chrome.png
      edge.png
      opera.png
      firefox.png

  •  5,495
    Tahir - SUPPORT replied

    Your Chrome Browser is zoomed out : 

    6294979234.png

  • RanebrookZina replied

    Oh, I didn't notice it. But maybe there is a way to fit three columns in a fullscreen, please? When I choose the 3 column layout the gallery is placed into a container and white sides are visible - screenshot attached. The row itself is set to 'Ful width content' 

    Attached files:  3 c..png

  •  5,495
    Tahir - SUPPORT replied

    Hey Again,

    Try using "Constrained FullWidth" Option and check.

    Thanks 

  • RanebrookZina replied

    Then I get two columns only and the container sides are there. See screenshot.

    Attached files:  screenshot.png

  •  1,569
    Andrew replied

    Hi RanebrookZina,

    Please send in your admin login credentials so that we may look into this further

    Thanks.

  •   RanebrookZina replied privately
  •  5,495
    Tahir - SUPPORT replied

    Hey Again,

    The Image Gallery is being placed inside a Tab Element, which could influence this behavior. Could you let us know how do you want it to appear so we can guide you on whether its possible at the moment.

    Thanks 

  • RanebrookZina replied

    Hi Tahir

    I would like it to look like in the screenshot. With the tabs on top, the gallery is as a fullscreen.

    Attached files:  chrome_649.png

  •  5,495
    Tahir - SUPPORT replied

    Hey Again,

    By Default the Image Gallery Thumbs are divided into 5 or 4 columns, however using the css below you can divide the Wide and Wide+Tall Thumb into 3 columns.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (min-width: 1300px) and (max-width: 1600px) {
        body .wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item.wide_tall {
            width: 33.3% !important;
        }
        body.wpb_gallery_slidesimage_grid .portfolio-items .col.elastic-portfolio-item.wide {
            width: calc(33.3% - 8px) !important;
        }
    }

    Thanks

  • RanebrookZina replied

    I added the CSS code, but nothing changed - https://www.ranebrook.co.uk/gallery/

  •  5,495
    Tahir - SUPPORT replied

    You need to set the layout to fullwidth in here as well: 

    1094142321.pngClick to View Larger Image.

    Thanks

  • RanebrookZina replied

    I changed it to Fullwidth, now there are two columns only, the CSS code didn't help. 

  •  5,495
    Tahir - SUPPORT replied

    check now.

    Thanks

  • RanebrookZina replied

    It worked. Thank you!!!