Designing Responsive Div

deyiskarakas 0
Viewed 38

I have a 4 button in navbar. I have listed the buttons one below the other, but they do not appear in responsive mode. That's why I want to change its position. I want to get a little over the 'device info' card (only in responsive mode). normal mode

here is my codes:

    <div id="mySidenav" class="sidenav">
                    <nav id="navigation">
                        <div class="buttons">
                        <input type="button" class="button2" value="CONFIGURATION" id="btn_conf">
                        <input type="button" class="button2" value="DIAGNOSIS" id="btn_diagnosis">
                        <input type="button" class="button2" value="DATA PLOT" id="btn_plot">
                        <input type="button" class="button2" value="UPDATE" id="btn_update">
                        <a href="javascript:void(0);" onclick="myFunction()" ></a>
        
                    </div>
                </nav>
                </div>

CSS:

@media only screen and (max-width:600px) {
   
    .buttons{
        flex-direction: column;
        margin: auto 0;
        position: inherit;
        flex-direction: column;
        display:block;
     
    }
}
responsive-design css html
1 Answers

.buttons definition was added display:flex and that seemed to work.

@media only screen and (max-width:768px) {
  .buttons {
    flex-direction: column;
    margin: auto 0;
    position: inherit;
    display: flex;
  }
}
<div id="mySidenav" class="sidenav">
  <nav id="navigation">
    <div class="buttons">
      <input type="button" class="button2" value="CONFIGURATION" id="btn_conf">
      <input type="button" class="button2" value="DIAGNOSIS" id="btn_diagnosis">
      <input type="button" class="button2" value="DATA PLOT" id="btn_plot">
      <input type="button" class="button2" value="UPDATE" id="btn_update">
      <a href="javascript:void(0);" onclick="myFunction()"></a>
    </div>
  </nav>
</div>

IT goldman0
Related