I am struggling to implement a slider on my web application. Despite adding all the necessary code for the slider within a div section with the class slider, I encounter an issue when switching from monitor or landscape view to mobile view - the text in the div section overflows.
Here's the HTML code for the slider:
@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");
h1 {
display: block;
font-size: 3em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
... // (CSS code continues)
<input {
display: none;
}<div class="slider">
<input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
... // (HTML code continues)
</div>When the page is in landscape mode, it appears like this:- https://i.sstatic.net/b2ezw.png
However, upon changing to Mobile view, it transforms into something like this:- https://i.sstatic.net/uFXZY.png The text spills out of the div section and spreads everywhere. How can I contain that specific section of the code to stay within the confines of the same section?