Adaptation of elements to different screen sizes

[Elise]

Hi,

I programmed an experiment with a yes or no question in every trial. To position the elements (buttons, feedback, click to continue message) I used “position: absolute” for the elements in my css file. Unfortunately, when opening the experiment on different computers the position of the elements changes (a lot more or less space between the elements appears). I tried to position the elements with “position: relative” and with creating canvas, but what is happening then is that as soon as the feedback appears all other elements move.

Has anybody encountered this problem and knows a solution?

Best,
Elise

[Jeremy]

Hi Elise,

Visual rendering can quickly become challenging when factoring in the variety of displays used to visit a webpage. The ideal solution will depend on what you are trying to accomplish: do you want constant spacing between elements, so that narrower resolutions might have them outflow the screen, or do you want to (try to) force all your elements to fit on the screen, in which case the spacing between the elements and/or their sizes cannot be constant

Modifying the CSS file is the most powerful and I would say the optimal solution in such cases, but CSS can be quite confusing (at least in my experience). Both the absolute and relative position settings should be interpreted relative to the first parent which has the same setting, so it’s not always truly absolute. I tried to make Canvas elements a little simpler (I don’t know if I succeeded). For example, if you want to show one rectangle on each quarter of the page, no matter the resolution, you can do this:

newCanvas("page", "100vw", "100vh")
  .add( "center at 25%" , "middle at 25%" , newCanvas().css('background-color', 'red').size("20vw","20vh") )
  .add( "center at 25%" , "middle at 75%" , newCanvas().css('background-color', 'green').size("20vw","20vh") )
  .add( "center at 75%" , "middle at 25%" , newCanvas().css('background-color', 'yellow').size("20vw","20vh") )
  .add( "center at 75%" , "middle at 75%" , newCanvas().css('background-color', 'blue').size("20vw","20vh") )
  .print( "center at 50vw" , "middle at 50vh" )

Feel free to give more detail about what visual rendering you’re aiming for

Jeremy

[Elise]

Hi Jeremy,

thanks a lot! The canvas solution is much more intuitive!
I tried to position the objects in one canvas and now it is working.

Best,
Elise

[Author]

Posts