[RESOLVED] Large screens

cluelessPHP

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

NogDog

Define "dealing with". 🙂

cluelessPHP

Oh, prevent from stretching out and looking generally awful

NogDog

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

cluelessPHP

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

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

}

NogDog

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);
}

cluelessPHP

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

NogDog

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.)

NogDog

I think this was the one: https://www.youtube.com/watch?v=7kVeCqQCxlk&t=1s

cluelessPHP

NogDog;11064431 wrote:
I think this was the one: https://www.youtube.com/watch?v=7kVeCqQCxlk&t=1s

Ohh I remember that now

And now I want to delete everything again :rolleyes:

NogDog

cluelessPHP;11064433 wrote:
...
And now I want to delete everything again :rolleyes:

You're officially a web developer now. 😉

cluelessPHP

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

maxxd

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.

cluelessPHP

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

NogDog

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.

cluelessPHP

Not entirely sure I like this new system

Weedpacket

There's also the flexbox model. I just spent a few minutes playing http://flexboxfroggy.com/

cluelessPHP

Sitting looking at this https://gridbyexample.com/ too

cluelessPHP

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

NogDog

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