Hi everyone,
I’m struggling with a responsive layout issue involving a custom HTML/CSS “rolling word” animation embedded in an HTML Component.
While the code works perfectly on Desktop and Mobile, the Tablet view is not responsive. The font size doesn’t seem to honor the media queries, and the rolling word often breaks to a new line or stays too small/large compared to the rest of the sentence.
I am leaving the code I am have below.
<div id="container">
<div class="main-sentence">
We are an independent creative production agency that goes all in on making
<span class="slider-wrapper">
<span class="dynamic-word">ideas</span>
</span>
</div>
</div>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
#container {
width: 100%;
display: flex;
align-items: center;
padding: 10px 0;
}
/\* Base \*/
.main-sentence {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
color: #fff;
line-height: 1.2;
text-align: center;
width: 100%;
font-size: 28px !important;
}
/\* Inline + tight spacing \*/
.slider-wrapper {
display: inline-block;
position: relative;
overflow: hidden;
height: 1.2em;
margin-left: 0.15em;
vertical-align: baseline;
min-width: 4ch; /\* prevents jump \*/
}
.dynamic-word {
display: inline-block;
position: relative;
color: #d35400;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/\* Tablet \*/
@media screen and (min-width: 601px) and (max-width: 1024px) {
.main-sentence {
font-size: 60px !important;
text-align: left;
}
}
/\* Desktop \*/
@media screen and (min-width: 1025px) {
.main-sentence {
font-size: 100px !important;
text-align: left;
letter-spacing: -0.03em;
}
}
/\* Animation \*/
.slide-out { transform: translateY(-100%); opacity: 0; }
.snap-bottom { transform: translateY(100%); opacity: 0; transition: none !important; }
.slide-in { transform: translateY(0); opacity: 1; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var words = \['ideas', 'content', 'marketing', 'digital', 'happen'\];
var index = 0;
var $word = $('.dynamic-word');
setInterval(function() {
index++;
$word.addClass('slide-out');
setTimeout(function() {
$word.removeClass('slide-out').addClass('snap-bottom');
$word.text(words\[index % words.length\]);
setTimeout(function() {
$word.removeClass('snap-bottom').addClass('slide-in');
setTimeout(function() {
$word.removeClass('slide-in');
}, 500);
}, 50);
}, 500);
}, 3000);
});
</script>
Current CSS logic I’m using:
CSS
@media screen and (min-width: 601px) and (max-width: 1024px) {
.main-sentence { font-size: 75px !important; }
}
My Question: Is there a specific way Wix handles IFrames on tablets that might be overriding my @media queries?
Any advice on how to get this to scale smoothly across the Tablet breakpoint would be greatly appreciated!
Thank you