Code snippets for styling your experiences

  • Updated

Where to add HTML or CSS styling in Mutiny?

Page content experiences

Component experiences

 

 

Code snippets for text

Use Case

HTML Snippet(s)

CSS Snippet(s)

Capitalization

Sentence case:

<span style="text-transform:none">This is some text.</span>

Title case:

<span style="text-transform: capitalize">This is some text.</span>

Lowercase:

<span style="text-transform:lowercase">This is some text.</span>

Uppercase:

<span style="text-transform:uppercase">This is some text.</span>

Sentence case:

text-transform: none;

Title case:

text-transform: capitalize;

 

Lowercase:

text-transform: lowercase;

Uppercase:

text-transform: uppercase;

Text Color

 
 <span style="color:#3a0068">This is some text.</span>
 
color: #3a0068;

Font Size

 
<span style="font-size:18px">This is some text.</span>
 
font-size: 18px;

Font Weight

 
<span style="font-weight: 400;">This is some text.</span>
 
font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400; 
font-weight: 500; font-weight: 600; font-weight: 700;
font-weight: 800; font-weight: 900;

A weight of 400 is normal body copy with 700 being the bold default.

Bold

 
<b>This is some text.</b>
 
font-weight: bold;

Italics

 
<i>This is some text.</i>
 
font-style: italic;

 

Underline

 
<u>This is some text.</u>
 
text-decoration: underline;

 

Line Height

 
<p style="line-height:18px">This is some text.</p>
 
line-height: 18px;

Code snippets for images and videos

Use Case

HTML Snippet(s)

CSS Snippet(s)

Add an Image

 
<img src="https://logo.clearbit.com/mutinyhq.com">

-

Add an Image with Link

 
<a href="https://www.mutinyhq.com/"><img src="https://logo.clearbit.com/mutinyhq.com"></a>

-

Add a Video

Use the embed code from your video hosting platform (YouTube, Vimeo, etc.).

 

Size

By Pixel

Width:

<img src="https://logo.clearbit.com/mutinyhq.com" width="500">

Height:

<img src="https://logo.clearbit.com/mutinyhq.com" height="500">

By Percentage

<img src="https://logo.clearbit.com/mutinyhq.com" width="90%">

 

By using either width or height, you'll maintain the asset's aspect ratio.

By Pixel

Width:

width: 150px;

Height:

height: 50px;

 

By Percentage

Width:

width: 75%;

Height:

height: 75%;

Code snippets for device type

You can use CSS to customize certain personalizations based on device type.
​
​NOTE: We recommend using this to make minor optimizations to an experience based on device type. If you're making more substantial changes (i.e. removing certain elements based on device type), you may be introducing extra variables into your test that wouldn't be taken into account by your experience analytics. In these cases, we recommend using "Device Type" in your segment instead.

Use Case

HTML Snippet

Change the color of your <h1> when the browser window is 600px wide or less.

 
<style>
@media only screen and (max-width: 600px) {
 h1 {
  color: red !important;
 }
}
</style>

Change the background color of your site when the browser window is 800px wide or larger.

 
<style>
@media only screen and (min-width: 800px) {
 body {
  background-color: red !important;
 }
}
</style>

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.