'can't change h1 font-size in print preview

I can't change h1 font-size in print preview. although every other property works, the font size doesn't work.

body{
	margin: 1%;
	padding:1%;
	background-color: rgba(0,0,255,.2);
	font-size: 100%;
	min-width: 500px;

}
header, footer{
  background-color:#0066FF;
  padding: 1%;
  margin: 1%;
}
header h1{
	font-size: 3rem;
	color:rgba(0,0,0,.7);;

}

section{
  margin:1%;
    padding:1%;
}

nav a{
	display:block;
	background-color: white;
	border: 1px solid black;
	text-align: center;
	border-radius: 35px;
	text-decoration: none;
	padding: 2%;
	margin: 1%;
}

h1{
	text-align: center;
	color:rgba(255,0,0,.7);;
}


.myClass{
	margin: 0em 1em;
	padding:.75em;
	border: 1px solid black;
	border-radius: .25%;

	/* Safari and Chrome */
	-webkit-column-count:3;
	-moz-column-count: 3;
	column-count:3;

}



ol{
	list-style:upper-roman;
	margin:1em;
}
img{
	display: none;
}

footer{
	clear: both;
	text-align:center;
	text-transform: uppercase;
}


@media screen and (min-width: 600px) {
	img{
		display: inline-block;
		width: 20%;
		margin-right: 4%;
	}

	section {
		display: inline-block;
		vertical-align: top;
	}
	#left {
		width: 20%;
	}

	#center {
		width : 70%;
	}

	#center div:last-of-type{
		width: 100%;
		padding:.75em;
		padding-left: 0;
		margin: 0em 1em;
	}
	h2 {
		font-size: 1.7em;
	}
	h1::after {
		content: "(I guess...)";
	}

	h3 {
		height: 35px;
		line-height: 35px;
		font-size: 1.6em;
		font-weight: bolder;

	}

	#center div p {
		height: 45px;
		line-height: 45px;
		font-size: 1.6em;
	}

	header , footer {
		background-color: initial;
	}

	footer {
		width: 70%;
		float: right;
	}

	footer p {
		text-align: left;
	}


}

@media print {

	nav a {
	display:block;
	background-color: white;
	border: 0;
	text-align: center;
	border-radius: 0;
	text-decoration: none;
	padding: 0;
	margin: 0;
	}

		h1 {

		font-style: italic;
		font-weight: bolder;
		font-size: 16px;
	}

}
<!-- 
Create a stylesheet that will style the page 
as it appears in the example. -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Responsive Design Lab</title>
      <link rel="stylesheet" type="text/css" href="responsive.css"/>
<meta charset = "UTF-8">
</head>
<!--  DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->

<header>
	<h1> Web Design is Awesome!!!</h1>
	<nav>
		<a href="http://www.umich.edu/">University of Michigan</a>
		<a href="http://www.intro-webdesign.com/">Intro to Web Design</a>
	</nav>
  </header>

  <footer>
  	<p>Sample code for Responsive Design .<br/> Colleen van Lent</p>
  </footer>
<!-- DO NOT CHANGE ANY PART OF THIS HTML CODE!!! -->
   
</body>
</html>
htmlcssmedia-queriesprint-preview


Solution 1:[1]

Try using em, px, or a a percent value.

h1 {
font-size: 24px;
font-size: 200%;
font-size: 1.5em;
}

The percentage will depend on what the default text size is. Usually the default size is 16px.

Solution 2:[2]

I was facing the same problem for H1. It turned out that for me normalize.css was overriding the font-size in the CSS file.

Solution 3:[3]

Try to use css for print mode:

@media print{
   h1{....}
}

Solution 4:[4]

You can add !important in front of the h1 property value so that the browser does not override the value in print preview.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Logan Foster
Solution 2 MakMao
Solution 3 Freelancer
Solution 4 Amrit Anupam

Related Questions