Apologies for the lackluster title, feel free to suggest a better one for this question.
I am looking to revamp the layout of my page for mobile devices. The current desktop version is shown below:
https://i.sstatic.net/r84aS.png
My goal is to achieve something similar to the following:
https://i.sstatic.net/N2ySv.png
The text should stick and adjust itself using JavaScript while scrolling through each step. I have a .text-container element with a specific height matching the drawings' entire height. The .text element is the sticky element.
Here's how my HTML is structured:
<article>
<div class="figure">
<div class="step" id="step-1"></div>
<div class="step" id="step-2"></div>
<div class="step" id="step-2-5"></div>
<div class="step" id="step-3"></div>
<div class="step" id="step-4"></div>
</div>
<div class="text-container">
<div class="text">
<h1>
Step <span>1</span>
</h1>
<div class="bold">Alice’s phone broadcasts a random message every few minutes</div>
<p>
In order to maintain user privacy, the message is sent over Bluetooth and does not use location for proximity detection.
<br>
This message is called a Proximity Identifier or EphID. These identifiers are unique and change often.
</p>
</div>
</div>
</article>
Below is the CSS I am using to adjust the layout (written in SCSS):
@media (max-width: 960px) {
article {
.text-container {
.text {
top: 50vh;
left: 0;
width: 100vw;
height: 50vh;
background: grey;
}
}
}
}
However, I am encountering an issue, resulting in this layout:
https://i.sstatic.net/y3ryt.png
It appears that there is an issue with the width and positioning of the .text element.
Per the comments, here is a CodePen (without the images, but the functionality remains the same)