I am struggling with the navigation bar design as it looks awful when the page is resized.
Everything looks fine in desktop mode, but shrinking the page causes issues. The buttons become oversized due to long text exceeding the container:
<section class="main_buttons">
<div class="container d-none d-sm-none d-md-block">
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
<a href="#customise-template">three long words</a>
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
<a href="#customise-template">testtest</a>
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
<a href="#customise-template">testtesttest</a>
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
<a href="#customise-template">test test test test</a>
<img src="assets/img/..." alt="">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-3">
<div class="button">
<div class="nav_btn btn btn-primary">
<div class="contenitore">
<a href="#customise-template">testtest test testtest</a>
<img src="assets/img/.." alt="">
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
<a href="#customise-template">test test test</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-3">
<div
class="button">
<div class="nav_btn btn btn-primary sos-button">
<div class="contenitore">
<a href="#customise-template">testtest test</a>
</div>
</div>
</div>
</div>
</div>
</div>
STYLING DETAILS BELOW
.nav_btn {
text-align: left !important;
margin: 2px 0;
width: 100%;
background-color: white !important;
border:2px solid #0062CC;
padding-left: 10px;
font-size: 16px;
&:hover {
background-color: #0062CC !important;
}
&:hover a {
color:white !important;
}
.contenitore {
width:100%;
display: flex;
justify-content: space-between;
i {
line-height:20px;
}
img {
width: 20px;
}
a {
text-decoration: none;
color:#0062CC;
font-weight: bold;
}
}
}
}
.button .sos-button {
border: 2px solid #ff4081;
&:hover {
background-color: #ff4081 !important;
}
&:hover a {
color: white;
}
a {
color: #ff4081 !important;
}
}