Email invite | XM Community
Question

Email invite


Userlevel 2
Badge +9

Hello

 

I am working on improving the look & feel of our email invite. Does anyone know, which element of the source controls the width of the text and positioning it in the middle of the screen?

 


3 replies

Userlevel 2
Badge +4

In Qualtrics, the width of the text and its positioning in the middle of the screen in the email invite can be controlled using CSS styles. The specific element that controls these aspects may vary depending on the email template you are using and any customizations you have made.

To identify the element that controls the width and positioning, you can inspect the HTML source code of the email invite. Right-click on the email invite in your browser and select "Inspect" or "Inspect Element" to open the browser's developer tools. Look for the HTML element that contains the text you want to modify. It could be a `<div>`, `<p>`, or other relevant element.

Once you have identified the element, you can apply CSS styles to it. To control the width, you can use the `width` property in CSS. For example:

```css
.element-class {
  width: 80%;
}
```

To position the text in the middle of the screen, you can use CSS flexbox or other positioning techniques. For example:

```css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

Replace `.element-class` and `.container` with the appropriate class or selector for the element you want to target.

Remember to test your changes and consider the responsive design of the email invite to ensure it displays correctly on different devices and screen sizes.

Hope it helps.

Userlevel 2
Badge +9

thanks @cmagg , I just had a quick look at the code itself. I don’t even know where to start.

I tried getting support from Qualtrics with this, but they do not deal with this type of query/ custom code. 

Does anyone know what else I can do? I do not know coding and I think I will just mess things up.

 

 

Userlevel 2
Badge +9

@cmagg sorry to trouble you again. Would it be something like this? 🤔

 

<div style="text-align: left;"><!--[if (gte mso 9)|(IE)]>

css

.element-class {

  width: 80%;

}

css

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

            </td>

            </tr>

            </table>

            <![endif]--></div>

 

<div style="text-align: left;"><!--[if (gte mso 9)|(IE)]>

            <table align="left" border="0" cellspacing="0" cellpadding="0" width="1000">

            <tr>

            <td align="center" valign="top" width="1000">

            <![endif]--><!-- UNSUBSCRIBE COPY --></div>

 

<div style="text-align: left;"><!--[if (gte mso 9)|(IE)]>

            </td>

            </tr>

            </table>

            <![endif]--></div>

Leave a Reply