Simple Layout - CSS to remove right padding

Hello @rbjak, 

If you're using the Simple Layout, making changes to its look and feel can be a bit challenging compared to other layouts. To center the buttons, you can use the following custom CSS code:
#navigation {
    justify-content: center !important;
}

Please try this code and let me know if it works for you. If you encounter any issues or if possible, please share the survey link with us so that we can inspect it and provide further assistance.

Thanks for the suggestion; that did indeed center the navigation button within the question container.

Do you have any leads on how to either remove the right padding, or force questions to span the entire container width?

Hello  @rbjak, 

you can use the following custom CSS code to centre the questions:

{

margin: auto !impotant

padding: initial !important;

}

@rbjak The simple layout doesn’t use .Skin or .SkinInner config, therefore your css is having no effect.

Please try this JS to center your image.

Qualtrics.SurveyEngine.addOnReady(function () {
	const quest = this;
	const qid = quest.questionId;
	const qc = quest.getQuestionContainer();
	const questionHolder = qc.querySelector("#question-display-" + qid);

	// These two lines will center your image
	questionHolder.style.marginLeft = "auto";
	questionHolder.style.marginRight = "auto";

	// These two lines will expand the image to cover the entire container.
	questionHolder.style.width = "100%";
	questionHolder.style.maxWidth = "100%";
});

For future user, the CSS code below did NOT work.

{

margin: auto !impotant

padding: initial !important;

}

However, @ahmedA’s JS code did center a specific question and is a good work-around until a global CSS solution is discovered.

@Tom_1842   That’s impressive, and worked exactly as I wanted.  Thank you very much.  Did you have to piece together the pieces, or is there a published CSS guide you used?

Glad to hear! I created a Simple layout survey and filled it up with a bunch of question types. Then I previewed the survey and used my browser's Developer Tools/Inspect Element (F12) to see which CSS rules were in place that were affecting the width of the elements, and I created new rules where the width/max-width for these elements are set to 100%.

@Tom_1842 Rock on, thanks!  I had done some inspection, but missed some of the top level containers.   I appreciate you sharing the knowledge.

/*full container simple layout*/
/*whole page*/
#page #auto-advance-banner-container, #page #footer, #page #header-container, #page #logo-container, #page #survey-canvas {
    width: 100% !important;
}

/*text entries*/
#app.no-mo-compo-layout .te .question-content .resize-wrapper, #app.no-mo-compo-layout .te .question-content input[type=text], #app.no-mo-compo-layout .te .question-content input[type=password], #app.no-mo-compo-layout .te .question-content textarea {
    width: 100% !important;
}

/*multiple choice*/
.mc.horizontal .choices .choice, .mc.vertical .choices .choice {
    max-width: 100% !important;
}

/*textgraphics*/
.question .question-display {
    max-width: 100% !important;
}

/*other codes*/
/*center buttons*/
#navigation {
    justify-content: center !important;
}

/*center images*/
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Hi! This was enormously helpful for my survey, too, but I have a follow up question: is there any possibility to center the answer options so that they’d be alligned with the top statement (see image below for clarification)?

And related to that same question type: is it possible to reposition the choices so that they’re further appart?

Thank you!