I am in the process of optimizing a registration form for mobile devices to enhance user experience. With Bootstrap 4, I aim to make my registration form occupy the entire width of the screen on smaller devices like iPhones. Although I have applied the appropriate container class and set the form class to 'col' for full width, the issue lies with the container not stretching as desired. Despite attempting to target the breakpoint in my Ocean-WP child theme's stylesheet, I'm unable to modify the container effectively. How can I ensure the container extends to 100% width on smaller devices? You can access the specific page on a mobile device here:
<div class="container" style="border: 2px solid green;">
<h1 id="page_title">Player Registration Page</h1>
<div class = "row">
<form style="border: 2px solid yellow;" class= "col" id = "player_info" name="player_info" action="http://www.statesoccerpass.com/index.php/player-registration-step-2/" method="post">
... (Form fields go here) ...
<input type="hidden" id="product_id" name = "product_id" value="0" />
<input type="hidden" id = "product_type" name = "product_type" value="player_signup" />
<input type="submit" style="font-size:24px; color:#0000FF;" value="Continue" tabindex = "20">
</fieldset>
</form>
</div><!--end form row-->
</div><!--end bootstrap container div -->
Media query in use:
@media (min-width: 576px) {
.container{
max-width:100% !important;
}
}