Skip to main content
O
osgood_
Legend
April 16, 2018
Answered

Is Flexbox supported on large screen TV format????

  • April 16, 2018
  • 2 replies
  • 1076 views

Shock horror, just returned from a meeting with a client where we where discussing the layout of their website viewed on a wide screen monitor, hooked up to a wall..........Flexbox failed to recognise some arttibutes, like flex: 1; - of course I guess they could have been using an older browser.

This has thrown me into confusion because I dont know if its their browser, something to do with the monitor or Flexbox.........humm. Every thing works as expected in Firefox, Chrome, and Safari on Mac.

Every other aspect of the layout which used Flexbox seemed in position apart from elements which had flex: 1; associated with them.?

Os

    This topic has been closed for replies.
    Correct answer pziecina

    Would you like the long reply, (and I do mean long) or the short reply?

    In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

    I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

    As for flex 1 never ever use shorthand for tv or game console browsers.

    2 replies

    pziecina
    pziecina
    Legend
    April 16, 2018

    One other thing Os, if you don't ask for the long answer.

    The use of the @support rule is your best friend when creating sites for viewing on large screen tv's and game consoles.

    pziecina
    pziecinaCorrect answer
    Legend
    April 16, 2018

    Would you like the long reply, (and I do mean long) or the short reply?

    In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

    I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

    As for flex 1 never ever use shorthand for tv or game console browsers.

    O
    osgood_Author
    Legend
    April 16, 2018

    pziecina  wrote

    Would you like the long reply, (and I do mean long) or the short reply?

    In the short reply, it depends on the age of the 'smart' tv, and the manufacturers OS of the tv. Are they going through a games console, (again which one, and how old).

    Unfortuantley dont know. They were somehow linking through a laptop computer, not a games console.

    pziecina  wrote

    I'll require the above for the long reply anyway, but if it is a smart tv, and it uses the Android OS it may be that they have not updated the OS since purchase, and if that was more than 6years ago you may have to remember the limitations of 6 years ago for Android devices. If the tv is less than 4 years old, and over 40 inch, then large screen tvs built a zoom into the browser, which required a seperate media query to be produced.

    Could be I guess, not a clue but it does throw the cat amongst the pigeons because itf that's what they are using to view on and make comments Im likely in trouble using Flexbox. All other positioning seemed ok as ar as I could tell apart from the elements that used flex; 1; (I'm pushing a footer to the bottom of the column)

    pziecina  wrote

    As for flex 1 never ever use shorthand for tv or game console browsers.

    Ok how about margin-top; auto; that has the same effect of pushing the footer down to the extreme bottom of the column?

    pziecina
    pziecina
    Legend
    April 16, 2018

    I use margins with flexbox child elements to produce layouts that are not in rows or columns, (often for stagering the content) so feel free to use margin it does work, (even with negative values).

    If the are connecting their laptop to a large screen tv, then the browser used is the laptops, and almost impossible to  design satisfactorily for, especially if it is connected to a 4k tv.

    Flexbox will work, but it may be that they are using IE, so check the bug list on git, especially item 4.

    https://github.com/philipwalton/flexbugs

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices