Is there any particular way of dealing with large screens and images? Say 2560px and above

    Oh, prevent from stretching out and looking generally awful

      Easiest thing I know of is to set a max width on an overall container div.

        Oh and after just write some new rule set for a larger size? i.e

        @media only screen and (min-width: 1200px) 
{

}

          I'm not sure if it's the "right" way to do it, but on my blog site I just applied it at the top level to the body section:

          body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 0 1em;
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 1.5em;
    grid-auto-rows: minmax(auto, auto);
}

            Didn't know half of that stuff existed, will try some of it

              The CSS Grid stuff is awesome for dealing with different screen sizes. It allows you to essentially rearrange your grid boxes for different displays. (I am not an expert, I just saw a youtube video about it and then trial-and-errored it into my blog styling.)

                cluelessPHP;11064433 wrote:

                ...
                And now I want to delete everything again :rolleyes:

                You're officially a web developer now. 😉

                  NogDog;11064435 wrote:

                  You're officially a web developer now. 😉

                  lol :glare:

                  Well I haven't REALLY done that much in the grand scheme of things I guess, just some CSS

                    NogDog;11064425 wrote:

                    I'm not sure if it's the "right" way to do it, but on my blog site I just applied it at the top level to the body section:

                    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 0 1em;
    margin: 0 auto;
    max-width: 1000px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0 1.5em;
    grid-auto-rows: minmax(auto, auto);
}

                    You don't have to support IE? That would be amazing!

                    Please understand that's a genuine response (and genuine jealousy), not any sort of crappy sarcasm - I wish I could convince my bosses to drop support for IE. I think I've got them set to drop IE10 as of the turn of the year, but 11's probably going to take some more time...

                    cluelessPHP - When I'm not working in WordPress, personally I try to use <picture> elements in the HTML and media queries in CSS, each where appropriate. With WordPress, just compress the image as best you can that it doesn't look like crap and hope.

                    yay wordpress.

                      maxxd;11064449 wrote:

                      You don't have to support IE? That would be amazing!

                      Please understand that's a genuine response (and genuine jealousy), not any sort of crappy sarcasm - I wish I could convince my bosses to drop support for IE. I think I've got them set to drop IE10 as of the turn of the year, but 11's probably going to take some more time...

                      Apparently CSS grid was invented for IE 10, it's mentioned in that video it's only lagging behind because the other browsers changed the spe

                      maxxd;11064449 wrote:

                      cluelessPHP - When I'm not working in WordPress, personally I try to use <picture> elements in the HTML and media queries in CSS, each where appropriate. With WordPress, just compress the image as best you can that it doesn't look like crap and hope.

                      yay wordpress.

                      I just found out about <picture> seems a handy tag, right now I'm thinking about starting from scratch (for the hundredth time) or carrying on with it as it is. Link to what I'm doing is in my sig both a "live" version and github version

                        maxxd;11064449 wrote:

                        You don't have to support IE? That would be amazing!

                        Please understand that's a genuine response (and genuine jealousy), not any sort of crappy sarcasm - I wish I could convince my bosses to drop support for IE. I think I've got them set to drop IE10 as of the turn of the year, but 11's probably going to take some more time...

                        Nope, just a personal blog site. I kind of tried (not sure I succeeded) to mark it up "mobile first", so that if they don't recognize the CSS grid stuff, it should still be legible and logically laid out -- if rather oddly on a large screen.

                          Maybe it's ok(ish) but it's different, still not sure if I should try and kill it with fire or not

                            If just to remove any dependence on JavaScript for page layout, I give it a big thumbs-up. 🙂