Recently, I encountered a challenge with my media query where I wanted to align a button next to another one when the browser width was reduced to 991px. However, instead of staying in place, the button started sliding underneath the other button as I continued to decrease the browser width.
I attempted to resolve this issue by setting the button's position to absolute, but unfortunately, that didn't produce the desired results. Despite trying various other solutions, I couldn't find a suitable fix for the problem.
If anyone has any suggestions on how I can ensure the button stays in place even when the browser width is less than 991px, please let me know. My apologies if my question appears vague; I'm open to any assistance or recommendations.
@media screen and (max-width: 991px) {
a.myImg {
position: absolute;
margin-left: 11em;
margin-top: -7.7em;
}
}
Below is the HTML code snippet:
<div class="container-fluid">
<div class="col-md-6">
<a href="#" class="myImg col-md-6 col-sm-5 col-xs-5">
<img src="picture/path"/>
</a>
</div>
</div>