Tips
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.mytext {
/*color: red;*/
font-size: 22px;
}
@media only screen and (max-width: 500px){
.mytext {
font-size: smaller !important;
}
}
</style>
</head>
<body>
<div class="container">
<img src="https://cdn.shopify.com/s/files/1/0043/5077/1267/files/sky-2.jpg?15370297742045285492" alt="sky2">
<div class="centered mytext">Important steps to taking care of your candle
<br> This is a second line.
<br><br> This is a thrid line, new paragraph. We can style all of this text via CSS if we want.
</div>
</div>