Make page mobile friendly-CodePudding

I made 5 stars for a page that I am working on, now I am realizing that its not mobile friendly and when I make the screen narrower it adds the stars in a vertical line, is there an easy way I can make this mobile friendly while still keeping the stars horizontal ?

I tried adding more divs in attempts keep the stars horizontal no matter the size of the screen.

body {
  background-color: #FFFFFF;
}

.flex {
  display: flex;
  /*14vm*/
  width: 16vw;
  margin: 0 auto;
  justify-content: space-between
}

.rate {
  position: relative;
  /*46vm*/
  height: 65vm;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 35px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #9d0505;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #9d0505;
}

<div >
  <div >
    <input type="radio" onclick="rate1_scr5();" id="star10" name="rate1" value="1" />
    <label for="star10" title="text">5 stars</label>
    <input type="radio" onclick="rate1_scr4();" id="star9" name="rate1" value="2" />
    <label for="star9" title="text">4 stars</label>
    <input type="radio" onclick="rate1_scr3();" id="star8" name="rate1" value="3" />
    <label for="star8" title="text">3 stars</label>
    <input type="radio" onclick="rate1_scr2();" id="star7" name="rate1" value="4" />
    <label for="star7" title="text">2 stars</label>
    <input type="radio" onclick="rate1_scr1();" id="star6" name="rate1" value="5" />
    <label for="star6" title="text">1 star</label>
  </div>
</div>

CodePudding user response：

is there an easy way I can make this mobile friendly while still keeping the stars horizontal?

Yes you can, you just have to set the parent container's width to max-content to prevent wrapping. See the snippet below:

body {
  background-color: #FFFFFF;
}

.flex {
  display: flex;
  /*14vm*/
  width: max-content;
  margin: 0 auto;
  justify-content: space-between
}

.rate {
  position: relative;
  /*46vm*/
  height: 65vm;
  padding: 0 10px;
}

.rate:not(:checked)>input {
  position: absolute;
  top: -9999px;
}

.rate:not(:checked)>label {
  float: right;
  width: 1em;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  font-size: 35px;
  color: #ccc;
}

.rate:not(:checked)>label:before {
  content: '★ ';
}

.rate>input:checked~label {
  color: #9d0505;
}

.rate:not(:checked)>label:hover,
.rate:not(:checked)>label:hover~label {
  color: #9d0505;
}

<div >
  <div >
    <input type="radio" onclick="rate1_scr5();" id="star10" name="rate1" value="1" />
    <label for="star10" title="text">5 stars</label>
    <input type="radio" onclick="rate1_scr4();" id="star9" name="rate1" value="2" />
    <label for="star9" title="text">4 stars</label>
    <input type="radio" onclick="rate1_scr3();" id="star8" name="rate1" value="3" />
    <label for="star8" title="text">3 stars</label>
    <input type="radio" onclick="rate1_scr2();" id="star7" name="rate1" value="4" />
    <label for="star7" title="text">2 stars</label>
    <input type="radio" onclick="rate1_scr1();" id="star6" name="rate1" value="5" />
    <label for="star6" title="text">1 star</label>
  </div>
</div>

This SO post might help you understand more of max-content value.

CodePudding user response：

Modify your flex class. It's a good start, but you should change the width to make it mobile-friendly. 16vw is going to be really small on mobile. You could do something like 300px or you can use @media screen queries (like @media screen and (min-width: 900px) { ... } to set the width of the class based on the width of the screen. The suggestion to set the width to max-content is also a good idea.