How to place gif on the right and text on the left

Customer Experience (All Surveys)
1

Hey there,

I don't have any experience with CSS but would love to style my survey in such a way that the text is placed on the left and the gif on the right.
Currently, when inserting a gif, it always shows above or below the text. Would someone be able to help with this?

Thanks!

2

Hey @frederike.freitag

Welcome to the SurveySparrow community :gem:

Looping in my @SurveySparrow_Support team who will reach you and help you to sort this issue.

Feel free to reach us with any questions.

:wave:t4:

3

That would be great! Thank you

1 Like
4

HI @frederike.freitag ,

Thanks for your patience

Below is the snippet to make the GIF on the right and text on the left, which applies only to the section-type question.

@media only screen and (min-width: 1100px) {
.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn h1,
.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn h3 {
width: 46%;
}

.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn_right {
max-width: 100%;
position: relative;
}

.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn h3 figure {
width: 50%;
right: 0;
position: absolute;
top: 0;
transform: translate(0, -50%);
}

.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn h3 figure img {
width: 100%;
}

.ss_cl_survey_qstn_item:not([data-qa-question-id]) .ss_cl_survey_qstn h3 p:last-child {
display: none;
}
}

1 Like