iframe { width: 100%; height: 100%; } * { box-sizing: border-box; } body { margin: 0; font-family: Arial; font-size: 17px; } .title-subtitle { color: #fff; position: relative; } .title-subtitle .title { visibility: inherit; transition: none 0s ease 0s; text-align: center; line-height: 66px; border-width: 0px; margin: 0px 30px; padding: 0px; letter-spacing: 0px; font-weight: 700; display: flex; flex-direction: column; white-space: normal; word-break: break-word; margin-top: 85px; text-shadow: 1px 1px 5px rgb(0 0 0 / 69%); } .bg{ margin: 0; padding: 0; background-image: url('/getresource/image?name=SecureCover1Clean.png&type=system'); height: 100%; width: 100%; background-position: initial; background-repeat: no-repeat; background-size: cover; position: absolute; } @media only screen and (min-width: 0px) and (max-width: 450px) { .title-subtitle .title { line-height: 40px; font-size: x-large; } } @media only screen and (min-width: 450px) and (max-width: 991px) { .title-subtitle .title { line-height: 50px; font-size: xx-large; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .title-subtitle .title { line-height: 50px; font-size: xx-large; } } @media only screen and (min-width: 1200px) { .title-subtitle { font-size: xxx-large; } }