[Vuejs]-Controll a pages responsive width size

by

1👍

✅

you can also fix overflow content like this

.button-container {
     padding-left: 0;
    list-style: none;
    display: -webkit-box;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-box-align: baseline;
    align-items: baseline;
    margin-bottom: 30px;
}



.button-container {
    max-width: 300px;
}


.button-wrapper {
    background-color: lightblue;
    flex-shrink: 0;
}
.button-wrapper button{
  padding:5px 15px;
  border-radius:5px;
  border:1px solid #000;
  margin:10px;
}
.button-container::-webkit-scrollbar {
  width: 2px;
  height:8px;
}
button-container::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px grey; 
  border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb {
  background: #ff9b51; 
  border-radius: 0px;
}
.button-container::-webkit-scrollbar-thumb:hover {
  background: gray; 
}
<!-- Meta View Port -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  

<div class="button-container">
  <div class="button-wrapper">
    <button type="button" class="btn-default">Range</button>
    <button type="button" class="btn-default">Week</button>
    <button type="button" class="btn-default">Month</button>
    <button type="button" class="btn-default">Quarter</button>
    <button type="button" class="btn-default">Year</button>
  </div>
</div>

1👍

You can easily add custom ‘breakpoints’ to your css in the form of a media query.

@media only screen and (max-width: 1550px) {
  // type your styles here
  // set your content to be vertically aligned
}

Let me know if this helps 🙂

Leave a comment