An issue has been brought to our attention regarding the layout causing overlaps on specific mobile devices. The problematic section of the grid is outlined below:
<FluidContainer>
<BRow>
<BCol cols="8" lg="4">
<div class="float-left d-flex m-10">
<router-link to="/" class="text-decoration-none">
<div class="d-flex align-items-center">
<!-- this is an image -->
<Logo class="d-inline-block align-top m-20" />
<!-- this is some text -->
<Strapline class="d-inline-block" />
</div>
</router-link>
</div>
</BCol>
<BCol cols="4" lg="8" class="d-flex">
<div class="d-flex align-items-center w-100 justify-content-end">
<BRow class="w-100">
<NavBarToggle
v-if="displayMobileNavigationToggle"
:navbarCollapseId="navbarCollapseId"
v-on:click.native="navbarToggleClicked"
class="d-md-block d-lg-none"
/>
</BRow>
</div>
</BCol>
</BRow>
</FluidContainer>
The problem arises where, regardless of the value assigned to "cols" in the two BCol containers, the first column containing the image and text maintains a minimum width while the navigation element overlaps it. There is available space on the left side of the screen that could be utilized to shift elements leftward and potentially create more room, but the current layout design does not utilize this space effectively.
https://i.sstatic.net/3QgmK.png
Is there a solution to move content to the left or perhaps truncate text in order to resolve this issue? Or is this a challenge we must accept and work around?