I am in the process of creating a vue application using bootstrap-vue. Here is a snippet of my template and styles:
<template>
<div>
<b-container class="p-0 mt-3" fluid>
<b-row style="height:110px">
...
...
...
</b-row>
</b-container>
</div>
</template>
<style scoped>
.left-align {
position: relative;
float: left
}
</style>
I have noticed that for the xl and lg breakpoints, everything is functioning as expected. However, once it reaches the md breakpoint, the content begins to be obscured by the content above it. This is visible in the image here: https://i.sstatic.net/fJSTL.png.
At this point, the button and the participant count become hidden. When I manually add a top margin to the row using the chrome dev tools, everything displays correctly. I attempted to address this issue by adding media queries, but I discovered that there are no media queries specifically for the extra small breakpoint (xs). As a newcomer to responsive development, I have been unable to find any resources to help me solve this problem.