Need Custom CSS code

For the first two points, we can use below CSS (assuming you are not using simple layout):

.Skin, .SkinInner {width:90% !important;}
#SkinContent{border:2px solid black}
.Matrix {max-width:100%!important;}
@media only screen and (min-width:1080px) {
 #Questions(min-width:1080px;}
}

Are you asking the third request for your email invite template?

Thanks, Shashi.

I am using the Blank theme and the Flat layout.(I like a clean uncluttered look.)

The code you provided does narrow the width and add a border -- but there’s no space or margin between the border and the questions.

Yes, I’d like to add the button in the invitation and reminders.

For Flat layout we can try this:

.Skin, .SkinInner {width:90% !important;}
#SkinContent{border:2px solid black;padding:10px;}
.Matrix {max-width:100%!important;}
@media only screen and (min-width:1080px) {
 #Questions(min-width:1080px;}
}

For button in email:

<a href="${l://SurveyURL}" style="display:inline-block; padding:12px 20px; background-color:#0074D9; color:#ffffff; 
          text-decoration:none; font-family:Arial, sans-serif; font-size:16px; 
          border-radius:5px; border:1px solid #005fa3;">Take the Survey </a>

Thanks again, Shashi. The code for the width, border, and padding worked, but I couldn’t get the button for the email to work. I pasted it in the Look and Feel/Style/Custom CSS box. When that didn’t work, I removed it from the CSS box and pasted it in the body of the invitation message itself, and that didn’t work either.

Ah, that did the trick! Thanks, Chee Heng.

Actually, I spoke too soon. The above code inserts the button into my invitation, but I can’t get the link to work. I use custom survey links because all my contacts have embedded data in them.

Assuming you want to pass data through survey URL, we can use below code as an example:

<a href="${l://SurveyURL}&test=2" style="display:inline-block; padding:12px 20px; background-color:#0074D9; color:#ffffff; 
          text-decoration:none; font-family:Arial, sans-serif; font-size:16px; 
          border-radius:5px; border:1px solid #005fa3;">Take the Survey </a>

I don’t think I want to pass data through the survey URL. I’ve been using Qualtrics for about 20 years and I’ve never even heard of that. I create contact lists, and each contact has various embedded data fields in it, such as gender, age, etc. Normally, when I insert the survey link, this is the code:  ${l://SurveyLink?d=Take the survey}  

I tried entering that instead of SurveyURL, but it doesn’t work.

I have a feeling we’re pretty close and the solution is very easy, but nothing I’ve tried so far has worked. Thanks for sticking with me.

The Survey Link and Survey URL are same, so if setup correctly the survey URL should also work as Survey Link

Success!! Thanks, Shashi.

Here’s another question about the invitation. When I receive the invitation and open it in my email client, the text extends the entire width of the screen. It looks terrible. This happens regardless of the email client I use. Is there a way to specify the width so it has a nicer look?

Try this (this will make the content center aligned):

<table align="center" border="0" cellpadding="0" style="padding:16px; background-color:#F2F4F8; border:1px solid #D9DBDE; border-radius:3px; font-family:arial">
	<tbody>
		<tr>
			<td style="padding-bottom:12px;font-size:15px;">Text goes here...........</td>
		</tr>
		<tr>
			<td>
			<table border="0" cellpadding="0" cellspacing="5" style="text-align:left;" width="100%">
				<tbody>
					<tr>
						<td style="background:#fff;border-radius:3px;border:1px solid #A5A5A5;"><a href="${l://SurveyURL}" style="display:inline-block; padding:12px 20px; background-color:#0074D9; color:#ffffff; 
          text-decoration:none; font-family:Arial, sans-serif; font-size:16px; 
          border-radius:5px; border:1px solid #005fa3;">Take the Survey </a></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

Thanks again for your time. That adds a gray background and a border to the invitation, but the text still spans the entire width of my screen. It would be great if the invitation took up only the middle half of the screen.