Remove Margin left and right from single question | XM Community
Skip to main content
Michael_Cooksey
Administrator
17 days ago
Solved

Remove Margin left and right from single question

  • February 13, 2024
  • 8 replies
  • 183 views
G
Level 2 ●●
Forum|alt.badge.img+6

I have a question that is a text/graphic that is being created from an embedded link. I want this question to be able to extend to the edge of the screen. Below this there will be other open end and single select answers that I want to stay in the current location (not extending out). I found this code from another thread that works for the entire survey when entered in the CSS, but I don’t want it to do all questions.

.Skin .SkinInner {
width: 100% !important;
max-width: 100% !important;
}

I also tried putting javascript in with no success:

Qualtrics.SurveyEngine.addOnload(function()
{

	jQuery("#"+this.questionId).find('.SkinInner').css("max-width", "100% !important");

});

 

Here is the link to the other thread:

https://community.qualtrics.com/custom-code-12/how-to-remove-left-and-right-margins-in-qualtrics-15412

Best answer by TomG

@gsheppard,

Use HTML View to add the CSS to the question text inside a <style> tag.

View original

8 replies

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • Answer
  • February 13, 2024

@gsheppard,

Use HTML View to add the CSS to the question text inside a <style> tag.

G
Level 2 ●●
Forum|alt.badge.img+6
  • gsheppard
  • Author
  • Level 2 ●●
  • 18 replies
  • February 13, 2024

Thanks @TomG! I put that into the question and it kept the rest of the survey formatted the right way. The only issue is that I have other questions below the text/graphic question that I was hoping to keep formatted similar to the others. I don’t know if it’s possible because I know when I inspect the .SkinInner element it does show it extending down the page on both sides of the image question. I’m ok with the format now as is since it’s a better experience than what I had before. Any thoughts on if it’s possible to only adjust the one question’s margin?

Here is how I have the question right now:

${e://Field/BenchmarkLink}
<style type="text/css">.Skin .SkinInner {
width: 100% !important;
max-width: 100% !important;
}
</style>

 

Sachin Nandikol
QPN Level 6 ●●●●●●
Forum|alt.badge.img+32
  • Sachin Nandikol
  • QPN Level 6 ●●●●●●
  • 457 replies
  • February 13, 2024

Hi @gsheppard,

Simply insert your code into the 'Text/Graphic' question. Then, insert a 'Page Break' between this question and the subsequent ones. This setup should deliver the desired behavior.

Sachin
G
Level 2 ●●
Forum|alt.badge.img+6
  • gsheppard
  • Author
  • Level 2 ●●
  • 18 replies
  • February 13, 2024

Thanks @Sachin Nandikol. We were hoping to keep some of the following questions with the text/graphic question if possible. 

TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • TomG
  • Level 8 ●●●●●●●●
  • 5923 replies
  • February 13, 2024
gsheppard wrote:

Thanks @TomG! I put that into the question and it kept the rest of the survey formatted the right way. The only issue is that I have other questions below the text/graphic question that I was hoping to keep formatted similar to the others. I don’t know if it’s possible because I know when I inspect the .SkinInner element it does show it extending down the page on both sides of the image question. I’m ok with the format now as is since it’s a better experience than what I had before. Any thoughts on if it’s possible to only adjust the one question’s margin?

You can’t because .SkinInner applies to the entire page.  If the text-graphic needs to be on the same page as the other questions, you might want to consider displaying it as a smaller version (i.e., the width of the theme) and displaying a larger version in a lightbox (i.e., click to view full size).

G
Level 2 ●●
Forum|alt.badge.img+6
  • gsheppard
  • Author
  • Level 2 ●●
  • 18 replies
  • February 13, 2024

Thanks @TomG I was afraid that the .SkinInner was probably going to be applied to the entire page. I haven’t tried using a lightbox before (I didn’t even know this was an option). I see there are a few posts about how to do this on the community so I’ll check them out and may reach out again if I have questions. Appreciate it!

Michael_Cooksey
Administrator
Forum|alt.badge.img+34

Happy to read all of the helpful comments on this post! Moving this post to the Custom Code category. Thank you, everyone! 

Head of Qualtrics XM Community
G
Level 2 ●●
Forum|alt.badge.img+6
  • gsheppard
  • Author
  • Level 2 ●●
  • 18 replies
  • February 13, 2024

@TomG It looks like you helped someone in this post: 

I put this code into my survey header:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/js/lightbox-plus-jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.min.css" rel="stylesheet" />

I tried putting this code into the question html:

<a data-lightbox="image-1" data-title="My caption" href="YOUR_IMAGE_LINK"><img src="YOUR_IMAGE_LINK" width="100" height="100"/>Image #1</a>

Because I’m using an embedded data field for the link it didn’t like that when I set it like this:

<a href="${e://Field/BenchmarkLink}" data-title="My caption" data-lightbox="image-1"><img width="100" src="${e://Field/BenchmarkLink}" height="100">Image #1</a>

What am I missing with my link?

 

I tested the lightbox with a hard-coded link in href and src and it is working. I just don’t know how to get the embedded link to work for it.

Leave a Reply


Terms & Conditions