Responsive CSS with media queries

Question

I am developing a responsive form, in which the section where the logo is located I have to hide it when viewed by a mobile. My problem is that the media-query is not working as expected, and I do not understand why. At the desktop it works very well.

The HTML looks like this:

<section class="form_wrap">
<section class="cantact_info">
<section class="info_title">
        <div class="text-center">
        <img src="images/logo1.png" class="img-fluid" alt="logo" width="110" height="112">
        </div>
        <h2>Form</h2>
</section>

<form action="" class="form_contact">
        <h2>Ingreso</h2>
        <div class="user_info">
            <label for="names">Name *</label>
            <input type="text" id="names">

            <label for="password">Pass *</label>
            <input type="password" id="password">

            <input type="button" value="Send" id="btnSend">
        </div>
        </section>
</form>

My CSS is currently this:

@media only screen and (max-width: 800px) {
.cantact_info{
  display: none;
 }
}

.cantact_info::before{
  content: '';
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  background: orange;
  opacity: 0.9;
}

.cantact_info{
  width: 38%;
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background-size: cover;
  background-position: center center;
 }

Try to put the media query at the end of the css file.

justDan
– justDan

2019-11-20 14:54:49 +00:00
Commented Nov 20, 2019 at 14:54 — justDan
– justDan, Commented Nov 20, 2019 at 14:54

Hien Nguyen · Accepted Answer · 2019-11-20 15:02:42Z

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cantact_info::before {
            content: '';
            width: 100%;
            height: 100%;

            position: absolute;
            top: 0;
            left: 0;

            background: orange;
            opacity: 0.9;
        }

        .cantact_info {
            width: 38%;
            position: relative;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-size: cover;
            background-position: center center;
        }

        @media only screen and (max-width: 800px) {
            .cantact_info {
                display: none;
            }
        }
    </style>
</head>

<body>
    <section class="form_wrap">
        <section class="cantact_info">
            <section class="info_title">
                <div class="text-center">
                    <img src="images/logo1.png" class="img-fluid" alt="logo" width="110" height="112">
                </div>
                <h2>Form</h2>
            </section>

            <form action="" class="form_contact">
                <h2>Ingreso</h2>
                <div class="user_info">
                    <label for="names">Name *</label>
                    <input type="text" id="names">

                    <label for="password">Pass *</label>
                    <input type="password" id="password">

                    <input type="button" value="Send" id="btnSend">
                </div>
        </section>
        </form>
</body>
</html>

You need add meta viewport to head tag

and move media query to end of CSS file, CSS style will apply from top to bottom.

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

Rohit Kaushal · Accepted Answer · 2019-11-20 14:58:13Z

2

Your @media Query is overridden by next lines.

.cantact_info{
  display: flex;
}

always put @media queries in the end of the css to avoid this.

answered Nov 20, 2019 at 14:58

Rohit Kaushal

5786 silver badges15 bronze badges

Comments

Par Tha · Accepted Answer · 2019-11-20 15:00:58Z

2

Solution number 1 :

Your media query is at the top of the css so try give !important.

@media only screen and (max-width: 800px) {
.cantact_info{
  display: none !important;
 }
}

Solution number 2 :

Try add your media query at the end of the css, it will work.

answered Nov 20, 2019 at 15:00

Par Tha

1,5418 silver badges10 bronze badges

Collectives™ on Stack Overflow

Responsive CSS with media queries

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related