- This topic has 4 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
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!
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
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.
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
- You must be logged in to reply to this topic.