CODEWITHSUNDEEP
htmlcssresize
b_900
b_900

Reputation: 149

HTML/CSS elements moving when screen is re-sized

I am making a beat maker which is nearly finished, apart from that when I reduce the screen height, the volume sliders move upwards and the other elements move to the left. How can I stop this? Any help would be great, thanks.

HTML

<div class="controls">
            <input type="range" class="volume-slider kick" max="100" min="0" value="100">
            <h1>Kick</h1>
            <button data-track="0" class="mute kick-vol">
                <i class="fas fa-volume-mute"></i>
            </button>
            <select name="kick-select" id="kick-select">
                <option value="./BeatSounds/kick-classic.wav">Classic Kick</option>
                <option value="./BeatSounds/kick-808.wav">808 Kick</option>
                <option value="./BeatSounds/kick-heavy.wav">Heavy Kick</option>
                <option value="./BeatSounds/kick-tight.wav">Tight Kick</option>
                <option value="./BeatSounds/kick-tape.wav">Tape Kick</option>
            </select>
        </div>

CSS

.volume-slider {
  display: flex;
  -webkit-appearance: slider-vertical;
  height: 3.5rem;
  margin: 1rem 0rem;
  position: absolute;
  cursor: pointer;
  outline: none;
}

.volume-slider.kick {
  left: 5vh;
  top: 19vh;
}

Upvotes: 2

Views: 703

Answers (2)

HamiD
HamiD

Reputation: 1090

change top:19vh to top:5rem (or any other size using rem) from your .voume-slider.kick element.

Upvotes: 2

Mamdlv
Mamdlv

Reputation: 540

What you'll need to use is media queries when preparing your site for different screen sizes/devices.

Check out this for further info: https://www.w3schools.com/css/css3_mediaqueries.asp

Once you add media queries to your page you can then test out how your site will look based on the screen size.

Upvotes: 0

Related Questions