[Resolved] Website looks different in different browsers

Home Forums Support Website looks different in different browsers

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #973851
    James

    I’ve just uploaded my site to browsershots.org and tried it on ie. It looks totally different on different browsers.

    On most (like 90% of then, the magazine header layout is not in grid format, but stacked on top of each other and too wide so the images look mildly distorted.

    How can I fix this?

    #973876
    David
    Staff
    Customer Support

    Hi there,

    are you using the Dispatch Site?
    If so then you can try this – go to Customizer > Additional CSS and look for this chunk of code:

    @media (min-width: 600px) {
        .wpsp-grid .wp-show-posts {
            display: grid;
        }
    }
    
    @media (min-width: 900px) {
        .wpsp-grid .wp-show-posts {
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: 1fr auto;
        }
    
        .wpsp-grid .wp-show-posts article:first-child {
            grid-column: 1 / 5;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(2) {
            grid-column: 5 / end;
            grid-row: 1 / 2;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3) {
            grid-column: 5 / 7;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 7 / end;
            grid-row: 2 / 4;
        }
    }
    
    @media (max-width: 899px) and (min-width: 600px) {
        .wpsp-grid .wp-show-posts article {
            grid-column: span 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-row: 3;
            grid-column: span 2;
        }
    }

    And replace it with:

    @media (min-width: 600px) {
        .wpsp-grid .wp-show-posts {
            display: -ms-grid;
            display: grid;
        }
    }
    
    @media (min-width: 900px) {
        .wpsp-grid .wp-show-posts {
            -ms-grid-columns: (1fr)[8];
            grid-template-columns: repeat(8, 1fr);
            -ms-grid-rows: 1fr auto;
            grid-template-rows: 1fr auto;
        }
    
        .wpsp-grid .wp-show-posts article:first-child {
            -ms-grid-column: 1;
            -ms-grid-column-span: 4;
            grid-column: 1 / 5;
            -ms-grid-row: 1;
            -ms-grid-row-span: 3;
            grid-row: 1 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(2) {
            grid-column: 5 / end;
            -ms-grid-row: 1;
            -ms-grid-row-span: 1;
            -ms-grid-column: 5;
            -ms-grid-column-span: 4;
            grid-row: 1 / 2;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(3) {
            -ms-grid-column: 5;
            -ms-grid-column-span: 2;
            grid-column: 5 / 7;
            -ms-grid-row: 2;
            -ms-grid-row-span: 2;
            grid-row: 2 / 4;
        }
    
        .wpsp-grid .wp-show-posts article:nth-child(4) {
            grid-column: 7 / end;
            -ms-grid-column: 7;
            -ms-grid-column-span: 2;
            -ms-grid-row: 2;
            -ms-grid-row-span: 2;
            grid-row: 2 / 4;
        }
    }

    Ignore the errors/warnings you see in the Customizer, just check the box to say all is ok – its simply because the WordPress CSS parser doesn’t recognise CSS grid properties.

    #973892
    James

    That fixed the problem. Thanks David!

    #973894
    James

    Is there an optimal container width for Dispatch, or can I set it to 1200 without issue?

    #973899
    David
    Staff
    Customer Support

    Glad to hear that – thanks for the reminder – was meant to update the CSS 🙂

    No optimal size – 1200px wouldn’t be a problem.

    #973900
    Wacey

    What is Dispatch Site? It looks like you just added ms prefixes to fix it?

    #973908
    David
    Staff
    Customer Support

    Dispatch Site can be seen in the GeneratePress library:

    https://generatepress.com/site-library/

    Yes – i was being lazy and forgot to do the prefixes when writing the CSS lol

    #974136
    Wacey

    Ah, should have looked there. Just searched in the documentation.

    Forgive the silly question, does WP work with something like https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/ so we don’t have to worry about manually adding prefixes?

    #974155
    David
    Staff
    Customer Support

    No – the autoprefixer you would add to your IDE when writing your own CSS.

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