media does not work

Navigation
1

Hello, I'm trying to make the background of a section with a color on the mobile and with an image on the desktop but it does not work. I'll send the code and the print how it is.

Apparently it looks right, but it does not 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>
    
asked by anonymous 29.08.2018 / 19:31

4 answers

0

Here is a template I made based on your code.

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

See the example. Run tb in "All Page" to see that when in widths greater 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><scriptsrc="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><scriptsrc="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>
    
29.08.2018 / 20:08
1

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

There was something important missing. Can not 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;
    }
}
    
29.08.2018 / 19:35
1

Hello, follow a codepen link

As you mentioned, you already tried to change this: @media screen and (min-width: 1001px) , check that the following tag is set 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: link

    
29.08.2018 / 19:47
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%;
    }
}
    
29.08.2018 / 19:35
store an array of objects in a local storage with JS JPA Error with MySQL 8