I added the additional CSS. This is how it currently reads:
@media (max-width: 768px) {
.theme-header-logo-center img.custom-logo {
max-width: 100% !important;
}
}
@media (max-width: 500px) {
.theme-main-slider.vrsn-three .theme-slider-content .title-large {
font-size: 2.4rem;
letter-spacing: 3px;
word-break: break-all;
}
}
Now on the mobile version it breaks the text like this:
BEAUTIFULLY DES
IGNED. PURPOSEF
ULLY BUILT.