On my website, I have a tab menu that is causing unexpected behavior when resizing the page. My goal is to only display the font awesome icon without the text when the device width is equal to or below 768px.
This is how the current menu looks like:
<div>
<div class="d-flex flex-row text-white align-items-stretch text-center">
<div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
<i class="fa fa-home d-block"></i> Home
</div>
<div class="port-item p-4 bg-success" data-toggle="collapse" data-target="#resume">
<i class="fa fa-graduation-cap d-block"></i> Resume
</div>
<div class="port-item p-4 bg-warning" data-toggle="collapse" data-target="#portfolio">
<i class="fa fa-folder-open d-block"></i> Portfolio
</div>
<div class="port-item p-4 bg-danger" data-toggle="collapse" data-target="#contact">
<i class="fa fa-envelope d-block"></i> Contact
</div>
</div>
</div>
I want to hide the text "Home", "Contact", "Resume", and "Portfolio" when the device width is @media(min-width:768px).
Here is my current @media query:
@media (max-width: 768px) {
#main-header .port-item {
width: 25%;
}
#main-header .port-item .fa {
font-size: 1em;
}
.map-responsive {
margin-top: 15px;
}
}
A visual reference of what I am trying to achieve can be seen in this image: