Show and hide a div with media query

Question

Show and hide a div with media query

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have unsuccessfully tried to show and hide a class called "min_footer". I want that class to be hidden if the width of the browser is greater than 880 and if the width is equal to or less than 880 the class must show its contents.

The code is as follows:

@media only screen and (min-width: 880px) {
.min_footer {
	display: none !important;
 }
}

@media only screen and (max-width: 880px) {
	.min_footer {
		display: block !important;
	}
}

<div class="min_footer">
				<?php include ("min_footer.php"); ?>
		</div>

I have another half query that works without problems with an almost identical code, so I ruled out that the problem is due to use of the PHP "include".

The web in question is this: ishameetings.cl and the class "min_footer" is at the bottom of that web page. On the other hand by decreasing the width can be checked that the content does not want to be displayed.

Any suggestions are grateful.

css

asked by 07.03.2017 в 21:15

source

3 answers

1

This should work for you

if it is LESS than 880, it will show the content

@media only screen and (max-width: 880px) {
 .min_footer {
    display: block !important;
 }
}

if the content is GREATER hidden

@media only screen and (max-width: 1500px) and (min-width: 881px) {
 .min_footer {
     display: none !important;
  }
}

answered by 07.03.2017 в 21:29

0

I've finally been able to fix it using its codes and a little imagination as a basis. In the end I had to hide all the "child" classes within the min_footer class. I do not know why this problem occurs, maybe it is plugins incompatibility in WordPress. Anyway I leave the styles for someone to be useful.

@media only screen and (min-width: 880px) {
	.min_footer {
		display: none;
	}
}

@media only screen and (max-width: 880px) {
	.columnas_pie {
		display: none;
	}
	
	.creditos {
		display: none;
	}
	
	.mailchimp_twitter {
		display: none;
	}
	
	.logo_certificacion {
		display: none;
	}
}

answered by 08.03.2017 в 16:17

Is it possible to obtain metadata from a query with JPA? Obtain data- from a checkbox and when selected show data value- in a [duplicate] input

score 1 · Accepted Answer

The only thing I find strange is that redundas when putting the media query max-width: 880px since, when the width of the viewport is less than 880px , the display: none will no longer be applied that you defined in the average query.

Example

.min_footer {
  background-color: coral;
  height: 60px;
}

@media only screen and (min-width: 880px) {
  .min_footer {
    display: none;
  }
}

<div class="min_footer">

</div>

Click on "full page" to see how the media query works.