Experiment appears left-aligned on screen

[suphasiree]

Hello Jeremy,

I have another question!

I copied an old experiment shell to create a new experiment (downloading as zip and then uploading the files), but for some reason the new experiment appears left-aligned on the screen, rather than centered.

The original experiment appears centered on the screen, as intended. The strange thing is that when I try creating a brand new experiment containing just the default files provided by PC Ibex, even that experiment is appearing left-aligned rather than centered on the screen. The whole container appears all the way to the left of the screen.

Do you know why this might be? I’m stumped because I hadn’t changed anything in the original code. Thanks in advance!

[Jeremy]

Hi,

Starting with PennController 1.9, the commands .left, .center and .right align the element itself on the page(/its container) rather than its content.

If you need to center the content of a Text element, use .css("text-align","center")

Jeremy

[suphasiree]

Hi Jeremy,

Thanks for your reply! If I want to reproduce the original experiment’s look, i.e., a container centered on the page but with the text left-aligned inside it, is there still a way to achieve this?

I’ve tried looking at the global_main.css file and inspecting my experiment page, but I couldn’t figure out which element I should change to have the container be centered like before.

[Jeremy]

Hi,

You need to upload a file named PennController.css to your project’s Aesthetics folder with the following:

.PennController {
    max-width: 40em;
    left: 50vw !important;
    transform: translateX(-50%);
}

Adapt the value of max-width to your preferences

Jeremy

[suphasiree]

Thanks so much for your help Jeremy, that worked perfectly!

[Author]

Posts