Experiment appears left-aligned on screen

PennController for IBEX Forums Support Experiment appears left-aligned on screen

This topic contains 4 replies, has 2 voices, and was last updated by Avatar suphasiree 2 weeks, 4 days ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #6494
    Avatar
    suphasiree
    Participant

    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!

    #6496
    Jeremy
    Jeremy
    Keymaster

    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

    #6498
    Avatar
    suphasiree
    Participant

    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.

    #6499
    Jeremy
    Jeremy
    Keymaster

    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

    #6506
    Avatar
    suphasiree
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.