Home Forums Art WordPress Theme 4 Columns Grid bug on Chrome with high resolution screen

This topic contains 7 replies, has 2 voices, and was last updated by  BWSM 1 month ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #18035

    kantik
    Participant

    Hi,
    congratulations for the work on this theme.

    I’m having some trouble with a 4 columns grid (in BM Content Builder), with Chrome on a high resolution screen (Microsoft Surface). It works on Firefox, Edge and on others “standard” screens.

    When I choose 4 columns on a grid, with a 12/12 width, I get sometimes 3 images on a line, a blank space and the fourth image on the next line. I don’t know how to avoid this.

    Here is a screen of what I get:
    4 column grid with a bug

    Thanks

    #18036

    BWSM
    Keymaster

    Hi,
    Thank you for purchasing our theme.
    Could you leave the issued page URL, I need to check it. Thanks!

    Regards!
    Bwsm – Professional WordPress Theme Studio
    uiueux.com

    #18037

    kantik
    Participant

    Thanks for your quick reply,

    here is the URL: http://alexandrabatina.com/Compositing

    It happens on a 2256×1504 Surface screen.

    #18039

    BWSM
    Keymaster

    Hi

    I don’t have the device to test. Please check if it fixed with this custom CSS.
    Please paste the custom CS code to “Appearance > Customize: Additional CSS”

    @media (min-width: 768px) {
    .ux-portfolio-4col .grid-list { height: auto!important; display: flex; flex-wrap: wrap;}
    .ux-portfolio-4col .grid-list .grid-item  { position: relative!important; left: 0!important; top: 0!important;}
    }

    Regards

    #18043

    kantik
    Participant

    Hi,

    I tried, and it works, but it disables the smooth/nice animation when resizing the window.
    In place, the images from the grid go weirdly to bottom/right when resizing.
    It’s not that serious, so for the time being I put this, in order to apply your code only on retina screens:

    @media 
    (-webkit-min-device-pixel-ratio: 1.25), 
    (min-resolution: 120dpi){ 
        .ux-portfolio-4col .grid-list { height: auto!important; display: flex;
    flex-wrap: wrap;}
    .ux-portfolio-4col .grid-list .grid-item  { position:
    relative!important; left: 0!important; top: 0!important;}
    }
    

    Thanks for your reply

    #18045

    BWSM
    Keymaster

    Thanks for sharing.
    Why apply it only for retina? I suggest you add (min-width: 768px)for @media also.

    #18051

    kantik
    Participant

    I made the change only for retina because I’ve not this bug on normal screens, even on a dual screen (more than 3400 pixels of width).

    With your patch, which makes thankfully the 4 columns working on a retina screen (anyway for Microsoft Surface), it makes strange movements on the images from the grid when resizing manually the window. But the important thing is that the 4 columns layout is now working.

    However, there is no problem when choosing a 3 or 5 columns layout.

    Best

    #18054

    BWSM
    Keymaster

    Okay, thanks for sharing, I am not sure if it caused by retina screen. But I don’t have the Surface to test. We will check it further if we get new reporting.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!