My options overlap when i switch to mobile view

In desktop mode, the formatting is fine but when i switch to mobile mode the options overlap on each other. Here is the code:

.btn {
    margin: 0 10% 0 10%;
}

.btn-strongly-agree {
    color: #89d298;
    font-weight: bold;

}

.btn-strongly-agree.active,
.btn-strongly-agree:active,
.btn-strongly-agree:focus,
.btn-strongly-agree:active:focus,
.btn-strongly-agree.active:focus,
.btn-strongly-agree:hover


var prompt_values = [
{
    value: 'Strongly Agree', 
    class: 'btn-default btn-strongly-agree',
    weight: 5,
}

Any Help would be apperciated.

tisuchi

3 years ago

Level 70

@rehman_ali If you apply @media does it work for you?

@media only screen and (max-width: 767px) {
  .btn {
    margin: 0 5% 0 5%;
  }
}

Please or to participate in this conversation.