Here is the code I am working with:
<div class="container-fluid">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
When I view this code in the browser and resize the window to a smaller size, the divs stack on top of each other. However, when I deploy this to my server and access the site on my mobile phone, the divs do not stack as expected. I have tested this on two Android devices using Chrome, and both showed the same behavior.
I have also attempted the following code, but it did not resolve the issue:
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6"></div>
<div class="col-12 col-md-6"></div>
</div>
</div>
What am I missing in my code?
Update:
I have added the following line to the head section of my index.html file, but it did not solve the problem:
<meta name="viewport" content="width=device-width, initial-scale=1" />Update: Issue Resolved: Clearing the cache on my mobile phone finally caused the divs to stack as intended. I am unsure if it was the result of the meta tag, but I will consider it the solution to the problem.