@gsheppard,
Use HTML View to add the CSS to the question text inside a <style>
tag.
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>
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.
Thanks @Sachin Nandikol. We were hoping to keep some of the following questions with the text/graphic question if possible.
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).
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!
Happy to read all of the helpful comments on this post! Moving this post to the Custom Code category. Thank you, everyone!
@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.