media querie does not work

Question

Hi, I’m trying to get the background of a Ction to have a color on mobile and a desktop image but it doesn’t work. I’ll send you the code and print it out.

Apparently you seem to be right, but it doesn’t work at all. Could you help me?

@media (min-width: 1001px) {
#slice-mobile {

    background-image: url(assets/img/backgrounds/notebook2.jpg);
    background-position: bottom;
    background-position-y: 12%;
    }
}

@media (max-width: 1000px) {
    #slice-mobile { 

    background-color: #009976 !important 

    }
}

<section class="slice slice-xl slice1 slicexl1" id="slice-mobile" >
            <div class="container">
                <div class="row row-grid align-items-center">

                <div class="col-lg-6 agenda1">
                        <div class="pt-lg-lg pb-lg-sm text-center text-lg-left">
                            <h2 class="h2 text-white mb-2"><span style="border-bottom: 3px solid #5E00DE;">Agenda</span> médica completa</h2>
                            <p class="lead text-white lh-180">Utilize o Módulo de Agenda para fazer uma gestão completa de todos os seus agendamentos, incluindo atendimentos de ambulatório como consultas e retornos, ou mesmo procedimentos ou atendimentos específicos.</p>
                            <!-- <div class="countdown h2 text-white" data-countdown-date="12/01/2018" data-countdown-label="hide"></div> -->

                <div class="col-lg-12">
                    <ul class="list-unstyled">
                        <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Visualização da agenda por dia, semana ou mês.
                        </li>
                        <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Agendamento por profissional, procedimento e local.
                        </li>
                        <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Confirmação de consultas e retornos e alertas de compromissos.
                        </li>
                    </ul>
                </div>

                            <a href="https://localhost/landing_agenda/contato.php" id="iconeView2" class="btn btn-primary btn-circle btn-translate--hover mt-4"> <i class="fas fa-arrow-right arrow"></i> Fale com nossos consultores</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

Try to put it like this:

@media screen and (min-width: 1001px) {
#slice-mobile {

    background-image: url(assets/img/backgrounds/notebook2.jpg);
    background-position: bottom;
    background-position-y: 12%;
    }
}

Answer 2

To leave a color on mobile, do not need to declare a max-width. Let’s just say as standard with a color. Then when it is 1001 or higher, will exchange for the image.

Something important was missing. You can’t have !important.

#slice-mobile { 
   background-color: #009976; 
}

@media screen and (min-width: 1001px) {
   #slice-mobile {
       background-image: url(assets/img/backgrounds/notebook2.jpg);
       background-position: bottom;
       background-position-y: 12%;
       background-color: transparent;
    }
}

Answer 3

Hello, follow a codepen https://codepen.io/michaelsampietro/pen/eLdaYr

As you mentioned, you’ve tried to change it to this: @media screen and (min-width: 1001px), check if the following tag is defined in head of your html:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

If you want to read more about it, follow a link: https://www.w3schools.com/css/css_rwd_viewport.asp

Answer 4

It follows a model I made based on your code.

Notice that Bootstrap 4 is mobile first then he uses min-width, which means that only when the screen had at least 1001px wide will it put the image in the background. If the screen is smaller than 1001px it will use the color of BG.

Take the example. Run tb on "Whole Page" to see that when in widths larger than 1001px the image appears in BG.

#slice-mobile { 
    background-color: #009976;
}

@media (min-width: 1001px) {
    #slice-mobile {
        background-image: url(https://placecage.com/100/100);
        background-position: bottom;
        background-position-y: 12%;
    }
}

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>

    <section class="slice slice-xl slice1 slicexl1" id="slice-mobile" >
        <div class="container">
            <div class="row row-grid align-items-center">

            <div class="col-lg-6 agenda1">
                    <div class="pt-lg-lg pb-lg-sm text-center text-lg-left">
                        <h2 class="h2 text-white mb-2"><span style="border-bottom: 3px solid #5E00DE;">Agenda</span> médica completa</h2>
                        <p class="lead text-white lh-180">Utilize o Módulo de Agenda para fazer uma gestão completa de todos os seus agendamentos, incluindo atendimentos de ambulatório como consultas e retornos, ou mesmo procedimentos ou atendimentos específicos.</p>
                        <!-- <div class="countdown h2 text-white" data-countdown-date="12/01/2018" data-countdown-label="hide"></div> -->

            <div class="col-lg-12">
                <ul class="list-unstyled">
                    <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Visualização da agenda por dia, semana ou mês.
                    </li>
                    <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Agendamento por profissional, procedimento e local.
                    </li>
                    <li style="color: #fff;" class="py-2"><i class="fas fa-check" style="color: #5E00DE;"></i> Confirmação de consultas e retornos e alertas de compromissos.
                    </li>
                </ul>
            </div>

                        <a href="https://localhost/landing_agenda/contato.php" id="iconeView2" class="btn btn-primary btn-circle btn-translate--hover mt-4"> <i class="fas fa-arrow-right arrow"></i> Fale com nossos consultores</a>
                    </div>
                </div>
            </div>
        </div>
    </section>