Too small mobile view in boostrap 4 - html

Question

Goog morning,
I look forn an solution to create bigger and more visible mobile view for my bootrstap menu with language switcher. Everything is based on boostrap 4. Ive never tried to write something in bootstrap...
Any help??
`
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.1/css/flag-icon.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style type="text/css">
.phone-link {
border-radius: 25px;
background-color: lightblue;
color: #ffffff;
padding: 15px 25px;
}
.navbar-nav {
margin-right: 40px;
}
.navbar-nav .nav-item {
padding: 25px;
}
#media (max-width: 999px) {
.phone-link {
display: none;
}
}
.dropdown.language {
position: absolute;
right: 150px;
width: auto;
top: 35px;
}
#media (max-width: 991px) {
.dropdown.language {
right: 100px;
position: absolute; top: 10px;
}
}
</style>
<nav class="navbar navbar-light" style="background-color: #e3f2fd; ">
<a class="navbar-brand" href="#">
<img src="https://getbootstrap.com/docs/4.2/assets/brand/bootstrap-solid.svg" width="30" height="75" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="position: absolute; left: 0px; top: 76px">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
<div class="dropdown language">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width: 160; height: 42">
<span class="flag-icon flag-icon-us"></span> English
</button>
<div class="dropdown-menu dropdown-menu-left text-left language">
<p style="text-align: left !important">
<a class="dropdown-item" href="#fr"><span class="flag-icon flag-icon-fr"> </span> French</a>
<a class="dropdown-item" href="#it"><span class="flag-icon flag-icon-it"> </span> Italian</a>
<a class="dropdown-item" href="#ru"><span class="flag-icon flag-icon-ru"> </span> Russian</a>
</div>
</div>
</nav>
`
Mobile view is too small... I want to make elements more bigger and viisble