This has been bugging me for quite some time, but I have this page (https://fiftyallstars.com/value.html)) that has 4 labels for 4 sliders. The problem is I can't make the labels line up correctly for both the desktop view AND the mobile view.

Do I have to fix this with two separate css files for both orientations, is it a absolute/relative positioning thing, or is it something else entirely? I know you can view the source on the site, but I'll put it below as well in case that's easier. Thanks a ton for your time.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta content='https://fiftyallstars.com/Images/priority.jpg' property='og:image'/>
<meta content='What are your priorities?' property='og:description'/>
<link href='https://fiftyallstars.com/Images/priority.jpg' rel='icon' type='image/x-icon'/>
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="https://fiftyallstars.com/Images/Logo/50whiteonblack.jpg" />


<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">

<style>
body{
    font-family:font-family: 'Oswald', sans-serif;
}
h1{
    color:red;
    font-size:40px;
    margin-bottom:10px;
    margin-left:-50px;
    font-variant:small-caps;
}
h2{
    color:red;
    font-size:15px;
    margin-bottom:10px;
    margin-left:-50px;
    font-variant:small-caps;
    width:400px;
    text-align:justify;
}
    input{
        margin-top:0px;
        border:none;
        font-size:25px;
        color:red;
        text-shadow:  2px 1px 3px black;
    }
    .slider{
        margin:30px 0px;
    }
</style>


<title>VALUE</title>
<script>
  window.console = window.console || function(t) {};
</script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
</head>
<body translate="no">
<html>
<center><h1>What are Your Priorities?</h1><table width="900" style="margin-top:10px;"><tr><td>
<table align="right" style="font-weight:bold; font-variant:small-caps; letter-spacing:1px; font-size:15px; padding:10px 0px 10px 35px; height:275px;"  border="0"><tr><td align="right" valign="top">Making Players Better</td></tr><tr><td align="right" valign="center">Winning Games</td></tr><tr><td align="right" valign="center">Making Money</td></tr><tr><td align="right" valign="bottom">Showcasing Talent</td></tr></table></td>
<td height="145" cellpadding="5">
<div id="app">
<div class="slider-container">
<div class="slider" v-for="option, index in Sliders">
<input type="range" :id="'slider'+index" :min="min" :max="max" v-model.number="Sliders[index]" @input="changeSlider(index)" step="0.01">
<input type="number" :value="Math.round(Sliders[index])" @change="changeBox(index, option, $event)">
</div>
</div>
</div>
</td></tr></table>
<h2>While there's nothing wrong with striving for all 4, one may efficiently maximize the potential gains in any one category by sacrificing the others.</h2>
</center>
</body>
</html>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-9bf952ccbbd13c245169a0a1190323a27ce073a3d304b8c0fdf421ab22794a58.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script id="rendered-js">
var app = new Vue({
  el: '#app',
  data: {
    max: 100,
    min: 0,
    selectedAnswer: [],
    Sliders: [25, 25, 25, 25] },

  computed: {},


  methods: {
    changeSlider(slider) {
      const sum = this.Sliders.reduce((sum, val) => sum + val, 0);
      const diff = sum - 100;
      let remainder = 0;
      let arr = [];

      for (let i in this.Sliders) {
        if (i != slider) {//don't modify the slider which is being dragged
          let val = this.Sliders[i] - diff / (this.Sliders.length - 1);
          if (val < 0) {
            remainder += val;
            val = 0;
          }
          this.$set(this.Sliders, i, val);

        }
      }

      if (remainder) {
        const filteredLength = this.Sliders.filter((val, key) => val > 0 && key != slider).length;
        for (let i in this.Sliders) {
          if (i != slider && this.Sliders[i] > 0) {
            this.$set(this.Sliders, i, this.Sliders[i] + remainder / filteredLength);
          }

        }

      }

      this.$emit('input', this.Sliders);

      //convert to rounded values
      for (let i in this.Sliders) {
        arr.push(Math.round(this.Sliders[i]));
        this.selectedAnswer = arr;
      }

    },
    changeBox(slider, value, e) {

      console.log(slider);
      console.log(value);
      console.log(e.target.value);

      this.Sliders[slider] = Math.round(e.target.value);
      this.changeSlider(slider);

      console.log(this.Sliders);


      /*
                                 const sum = this.questionData.options.reduce((sum, val) => sum + val, 0);
                                 const diff = sum - 100;
                                 let remainder = 0

                                 for(let i in this.questionData.options){
                                        if(i != box){ //don't modify the slider which is being dragged
                                        let val = this.questionData.options[i] - diff / (this.questionData.options.length - 1)
                                        if(val < 0){
                                            remainder += val
                                          val = 0
                                        }
                                        this.$set(this.questionData.options, i, val)
                                      }
                                 }      */
    } } });
//# sourceURL=pen.js
    </script>
</body>
</html>

This seems to have worked. Please let me know if there's a better way

        /* Media Query for Tablets Ipads portrait mode */ 
        @media (min-width: 768px) and (max-width: 1024px){ 
            body { 
                background-color: white; 
            } 

            .pri1{
                position:relative;
                top:0px;
            }

            .pri2{
                position:relative;
                top:-8px;
            }

            .pri3{
                position:relative;
                top:5px;
            }

            .pri4{
                position:relative;
                top:-5px;
            }
        } 

        /* Media Query for Large screens */ 
        @media (min-width: 1281px) { 
            body { 
                background-color: white; 
            } 

            .pri1{
                position:relative;
                top:25px;
            }

            .pri2{
                position:relative;
                top:0px;
            }

            .pri3{
                position:relative;
                top:0px;
            }

            .pri4{
                position:relative;
                top:-25px;
            }
        } 
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.