Navigation Bar Button on Mobile Device (portrait mode)

[ivan77]

Hi,

I have a navigation bar button, it displayed fine on laptop and mobile device landscape mode.

But it is not displayed well on Portrait mode of mobile device, as you can see on attachment.

Any idea how to fix that ?

Rgds,

Here are my script :

<style>
.div-container{
  margin-bottom: 20px;
}

/* Style the links to imitate buttons*/

.btn {
  border: none;
  outline: none;
  padding: 10px 20px;
  background-color:#0092d1;
  cursor: pointer;
}

/* Style the active class, and links on mouse-over */

.active{
  background-color: #000000;
  color: white;
}

.btn:hover {
  background-color: #AEACAC;
  color: white;
}

.div-container a {
 color: white;
 text-decoration: none;
 font-size: 18px;

}

.div-container a:hover {
 color: white;
 text-decoration: none;
 font-size: 18px;
}

</style>

<div class ="div-container">
  <a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" class="btn">Create</a>
  <a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" class="btn">Monitor</a>
  <a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" class="btn">Validasi (FA)</a>
  <a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" 
class="btn">Status (FA)</a>
<a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" class="btn">Rekap (FA)</a>
  <a href="https://c0hc.caspio.com/dp/e0cf8000c21d71068d56" class="btn">Logout</a>
</div>

<script>
if (document.DataPageReadyHandler == undefined) {
const DataPageReadyHandler = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }

  const btns = document.querySelectorAll(".btn");

  btns.forEach( btn => {
           btn.addEventListener('click', function(e) {
         
            let activeElement = document.querySelector(".active");
             if(activeElement) {
                 activeElement.classList.remove("active");
                }
                e.target.classList.add("active");
             });
          });
}

document.addEventListener('DataPageReady', DataPageReadyHandler)
document.DataPageReadyHandler = 'Enabled'
}

</script>

 

[FinTheHuman]

Hello @ivan77,

Have you tried using a bootstrap button? That may help you with your responsive issue. 
Check it here: https://getbootstrap.com/docs/4.0/components/buttons/