Currently, I am optimizing my website for mobile browsers. To do this, I used Chrome Dev Tools to test it on a screen size of 320 x 568, but I encountered an issue.
The problem is that the button element within the div is positioned at the bottom, but only half of it is visible while the other half is not displayed.
Here's a screenshot illustrating the situation
I attempted to adjust the background styling (background-size, etc.), but these changes did not resolve the issue.
Could you provide me with some basic documentation or suggestions on how to address this problem?
Parent Div
<div class="view" id="activeSubstance" data-spy="activeSubstance" data-target="#activeSubstance" style="background-image: url('img/calculate_02.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;"></div>
The Child Element
<div class="row text-center align-items-center mt-3">
<div class="col" id="calculate">
<button type="button" class="btn btn-cyan btn-lg disabled" id="calcButton">Let's Calculate</button>
</div>
</div>
Full Code Snippet
// Full code snippet goes here
CSS Causing the Problem in "View" Class
// CSS causing the issue in "view" class goes here
Note: The screenshot shows that the end of the mentioned div is not the end of the page; it's where another div begins. However, the button seems to overflow from the div above and only half of it is visible.