Контейнер Bootstrap не использует мобильные устройства полной ширины

Question

У меня есть форма регистрации, которую я пытаюсь сделать более удобной для мобильных устройств. Я использую Bootstrap 4 и пытаюсь заставить свою регистрационную форму занять всю ширину экрана для небольших устройств, таких как iPhone и т. Д., Я использовал соответствующее имя класса контейнера для div, содержащего мою строку и форму. И я дал своей форме класс 'col', чтобы он занимал всю ширину. Но проблема в контейнере. И когда я пытаюсь нацелить точку останова в таблице стилей моей дочерней темы, я не могу влиять на контейнер. Как я могу заставить контейнер растягиваться на 100% ширины меньших устройств? Я использую дочернюю тему Ocean-WP. Вы можете просмотреть данную страницу на мобильном устройстве по следующей ссылке: http://www.statesoccerpass.com/player-registration-page/

<div class="container" style="border: 2px solid green;">
        <h1 id="page_title">Player Registration Page</h1>
        <?php echo $season_text ?>
            <!-- <div class="row"><?php //display_progress(1);?></div> -->
                <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">  

                        <fieldset class="form-group">

                        <span>Passes are valid for both Fall 2018<?php echo $season_year_start_text; ?> and Spring 2019<?php echo $season_year_end_text; ?>&nbsp;&nbsp;&nbsp;
                        Player passes expire July 31, 2019<?php echo $this_season_end->format('n/j/Y'); ?><br /><br />Can't find your team? If your team is new for this fall, please remind your coach to register the team so that players can register.  <br /><br/>
                        </span>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="league_id">1. Select your league</label>
                                <select class= "col-sm col-lg-10" id = "league_id" name="league_id" size="1" style="width: 304px;" onchange=""  tabindex = "2" >
                                    <option value='a' selected> -- </option>
                                    <?php echo display_active_leagues_select()?>
                                </select>
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="division_id">2. Select your division</label>
                                <select class="col-sm col-lg-10" id="division_id" name="division_id" size="1" style="width: 304px;"  tabindex = "2" >
                                    <option  value='a' selected> -- </option>
                                    <!--insert divisions here via ajax -->
                                </select>
                        </div>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="team_id">3. Select the team you want to join</label>
                                <select class="col-sm" id="team_id" name="team_id" size="1" style="width: 304px;"  tabindex = "3" >
                                    <option value='a' selected> -- </option>
                                    <!-- insert teams here via ajax --> 
                                </select>
                        </div>

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_first_name">Enter your first name</label>
                                <input class="col-sm" type="text" name="player_first_name" id = "player_first_name" tabindex = "4" style="width: 300px;"> 
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_middle_name">Enter your middle name</label>
                                <input class="col-sm" type="text" name="player_middle_name" id="player_middle_name" tabindex = "5" style="width: 300px;"> 
                        </div>  

                        <div class="form-group" style="border: 2px solid red;">
                                <label class="col-sm col-lg-2" for="player_last_name">Enter your last name</label>
                                <input class="col-sm" type="text" name="player_last_name" id="player_last_name" tabindex = "6" required style="width: 300px;">
                        </div>
                        <div class="col" style = 'font-size: 12pt;'>You must have a matching government issued picture ID.</div>

                        <div class="form-group" style="border: 2px solid green;">   
                                <label class="col" for="player_birth_month" >Enter your date of birth (Month/Day/Year)</label>

                                <div class="col-sm col-lg-6" style="border: 2px solid red;margin:0 auto;">

                                    <div class="col-sm-3" style="border: 2px solid;display:inline;">
                                    <label class="col-sm-1 col-lg-1" for="player_day_month" >Month</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_month" id="player_birth_month" required tabindex = "13">
                                            <option value=""></option>
                                            <?php select_month_input()?>
                                        </select>
                                    </div>

                                    <div class="form-group" style="border: 2px solid;display:inline;">
                                        <label class="col-sm-1 col-lg-1" for="player_day_month" >Day</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_day" id="player_birth_day" required tabindex = "14">
                                            <option value=""></option>
                                        <?php select_day_input()?>
                                        </select>
                                    </div>

                                    <div class="form-group" style="border: 2px solid;display:inline;">
                                        <label class="col-sm-1 col-lg-1" for="player_year_month" >Year</label>
                                        <select class="col-sm-1 col-lg-1" name="player_birth_year" id="player_birth_year" required tabindex = "15">
                                            <option value=""></option>
                                        <?php select_birthyear_input()?>
                                        </select>
                                    </div>

                                </div>

                                <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-->
            <?php
            //echo "<br/>Session user_id: " .get_session_value('user_id');
            require_once  $_SERVER ['DOCUMENT_ROOT'] . '/cart/cart-footer.php';
            require_once  $_SERVER ['DOCUMENT_ROOT'] . '/libraries/user-footer.php';
            ?>
            <?php display_admin_footer(); ?>
    </div><!--end bootstrap container div -->

Мой медиазапрос:

@media (min-width: 576px) {
    .container{
        max-width:100% !important;
    }
}

Answer 1

Вы можете попробовать полностью удалить class="container". Ваш класс строк хранит содержимое страницы вместе на больших устройствах. Не самая лучшая практика, но вам не придется сражаться с другими колоннами, которые тоже рушатся.

Пример:

<div style="border: 2px solid green;">
    <h1 id="page_title">Player Registration Page</h1>
    <?php echo $season_text ?>
        <!-- <div class="row"><?php //display_progress(1);?></div> -->
            <div class = "row">

В приведенном выше примере ссылки я изменил эту строку:

<div id="content-wrap" class="container clr">

до

<div id="content-wrap" class="clr">

У вас есть два контейнера (один на странице выше и пример с зеленой линией), которые сражаются друг с другом. Удалите любой из них, и он должен работать.

Answer 2

Вы можете попробовать это

@media (min-width: 576px) {
    .container{
        max-width:100% !important;
        padding-left:0px;
        padding-right:0px;

    }
}