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>