Various @media issues for monitor sizes

[RAMINCNZ]

Am not which specific css file the following css is. It appears that max-size is set to 720px for the majority of the @media requests

/*
adjustments as suggested here
https://www.webtrees.net/index.php/en/forum/3-help-for-2-0-alpha/32882-solved-support-for-bigger-monitors#70135
*/

@media (min-width:576px){.container-lg{max-width:540px}} /* bootstrap: col-sm /
@media (min-width:768px){.container-lg{max-width:720px}} / bootstrap: col-md /
@media (min-width:900px){.container-lg{max-width:860px}} / extra step added /
@media (min-width:992px){.container-lg{max-width:960px}} / extra step added, bootstrap: col-lg /
@media (min-width:1024px){.container-lg{max-width:974px}}
@media (min-width:1200px){.container-lg{max-width:1140px}} / extra step added, bootstrap: col-xl */
@media (min-width:1280px){.container-lg{max-width:1220px}}
@media (min-width:1400px){.container-lg{max-width:1340px}}
@media (min-width:1600px){.container-lg{max-width:1540px}}
@media (min-width:1680px){.container-lg{max-width:1620px}}
@media (min-width:1920px){.container-lg{max-width:1860px}}
@media (min-width:2560px){.container-lg{max-width:2500px}}

/* edit containers do not have to be that wide though on larger screens */
@media (min-width:576px){.edit-container{max-width:540px}}
@media (min-width:768px){.edit-container{max-width:720px}}
@media (min-width:1024px){.edit-container{max-width:720px}}
@media (min-width:1280px){.edit-container{max-width:720px}}
@media (min-width:1400px){.edit-container{max-width:720px}}
@media (min-width:1600px){.edit-container{max-width:720px}}
@media (min-width:1680px){.edit-container{max-width:720px}}
@media (min-width:1920px){.edit-container{max-width:720px}}
@media (min-width:2560px){.edit-container{max-width:2420px}}

/* align with edit-container */
@media (min-width:576px){.container.card.wt-osk{max-width:540px}}
@media (min-width:768px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1024px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1280px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1400px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1600px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1680px){.container.card.wt-osk{max-width:720px}}
@media (min-width:1920px){.container.card.wt-osk{max-width:720px}}
@media (min-width:2560px){.container.card.wt-osk{max-width:720px}}

I have three different screens (min size of them is lets say 1680px (being a laptop)) and the css does not allow for them at all..

The Following appears to work for me

/* edit containers do not have to be that wide though on larger screens */
@media (min-width:576px){.edit-container{max-width:540px}}
@media (min-width:768px){.edit-container{max-width:720px}}
@media (min-width:1024px){.edit-container{max-width:720px}}
@media (min-width:1280px){.edit-container{max-width:720px}}
@media (min-width:1400px){.edit-container{max-width:1300px}}
@media (min-width:1600px){.edit-container{max-width:1500px}}
@media (min-width:1680px){.edit-container{max-width:1500px}}
@media (min-width:1920px){.edit-container{max-width:1800px}}
@media (min-width:2560px){.edit-container{max-width:2400px}}

[ric2016]

Various @media issues

I do not understand what the actual issues are (if there is more than one). Maybe some screenshots will help? Also, which webtrees version is this?

Note that the width of the edit containers specifically is restricted to 720px because anything wider does not seem to be useful.

[RAMINCNZ]

Richard

Maybe it is just me and how I see things.. It seems so out of sync with the 'front end' and I do like a wider workspace.. Perhaps I should just make changes myself and remember to do so after each update..

What file should I look at to edit??

[ric2016]

If this is indeed 'only' about the width of the edit containers, I'll likely not change it. I don't see the benefit of an increased width there, as it doesn't change the overall layout (fields are still in a single row).

If you add your adjustments via the css/js-Module, the changes are permanent (not overwritten by updates). You may have to add an '!important' rule to make sure your setting take precedence.

Note that there is also a module setting in Vesta for the edit dialog (which affects the header and footer as well though).