Is it possible to change font size of header(Page title) and footer(Page URL and Pagination) print by browser in print by CSS?
Actually I've a big title in my page. But i want to display it completely by reducing it's size.
Is there any way to reduce font-size of title as we can set other property of page ie.
#page {
margin-top: 2cm;
margin-bottom: 2cm;
margin-left: 3cm;
margin-right: 3cm;
}
you can try this:
#media print {
h1 {
font-size: 12pt;
}
}
Otherwise you can checkout this tutorial for more information on CSS media:
http://www.tutorialrepublic.com/css-tutorial/css-media-types.php
Related
.contact-me h2 h3 {
font-size: 40px;
}
.contact-message{
width: 80%;
}
**This is my code inside media query and Its width is not working can anyone help, please
I selected the same name of class but it didn't work
This is the image from developer tools I incepted my site and found that in my media query .contact-message width is been overridden by my .contact-message outside media query**
Your css is overlapping so use !important tag. So new code will be:
.contact-message{
width: 80%!important;
}
I'm working on an HTML page and when I view the page there are no margins because I set margins and padding to 0px; in my CSS. The issue is when I go to print preview it shows with the margins from the browser setup.
Is there a way I can add margins to my page when viewing but that it doesn't add that extra margin space when it prints? I end up with a pretty big margin.
Use css #media and create different styles for when you want something to look/render differently when it's printed
.my__class {
font-size: 20px;
}
#media print {
.my__class {
font-size: 80px; // when you print .my__class will be 80px, but 20px on screen
}
}
This is a simple example of the basic rule:
<style tyle="text/css">
<!--
#media print {
body { font-size: 10pt }
}
#media screen {
body { font-size: 12pt }
}
#media screen, print {
body { line-height: 1.2 }
}
-->
</style>
I create a website template but when I set the size, my website breaks.
My resolution is 1600x900, and when I open template on another monitor with another size , my website breaks.
The code:
* {
font-family: 'PT Sans', sans-serif;
width: 1600px;
height: auto;
}
My breaks website:
My deffault website without width and height
* in CSS is a wildcard. Therefore, when you set
* { width:1600px; }
you set every element in the page to a width of 1600px. Instead, set just the body:
body { width:1600px; }
or create a <div> with a specific ID to encapsulate your web page:
div#main { width:1600px; }
So on my small website I have a div that I styled with CSS and as I was testing with various resolutions, the box looked distorted on a small 11 inch screen compared to my 27 inch screen. How can I make my 700 pixel heigth 200 pixel width div look the same size on all monitor sizes
Thanks
HERE IS THE CSS FOR THE DIV:
text-align:center;
border:3px solid black;
padding-bottom:10px;
height:700px; width:200px;
background-color: white; margin-right: 2cm;
margin-top: -19cm;
margin-left: auto;
You'll need to add a meta tag to identify the width and media queries to perform an action when the width is different. It would also be very helpful to add percentage onto your css elements rather than pixels.
HTML code:
<!doctype html>
<meta name="viewport" content="width=device-width"/>
add the meta tag to allow for the page identify the width of the device. see Mozilla's take on this
In this example a query for four different device widths on a <p> tag and background will be applied.
<body>
<h1>Media Queries Examples</h1>
<p>Increase or decrease the size of your window to see the background color change</p>
</body>
The CSS code:
p {
font-family: arial,san-serif;
font-size: 13px;
font-color: black;
}
h1 {
font-size:30px;
}
#media screen and (min-width:761px) {
body {
background-color:white;
}
h1 {
color:red;
}
}
#media screen and (max-width:760px) {
body {
background-color: #333;
}
h1 {
color:red;
}
p {
color: white;
}
}
#media screen and (max-width:480px) {
body {
background-color: #807f83;
}
h1 {
color:white;
}
p {
color: white;
}
}
#media screen and (max-width:360px) {
body {
background-color: #0096d6;
}
h1 {
color:white;
font-size:25px;
}
p {
color: white;
}
}
So using the #media Screen inside your css calls a query for the screen. You can use #Media all for all media devices (see further reading) when the device width reaches within the bounds of that query the css will then be applied to the element in question. see a current example. When you drag the box in the JSFiddle window, it'll change the color of the background and the color of the writing if the query is satisfied. You can apply the same logic to phones, tablets, tv and desktop. Media Queries for Standard Devices - CSS Tricks
This example was provided by an Anonymous user on JSFiddle. It provides a clear example of what is needed for you to ensure that your elements are styled in correspondence to the device in question. I take no credit.
Further Reading
- Microsoft - Media Queries
- #Media Rule - W3C
- Responsive Web Design Wiki
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
Hope this helps!
In addition to what Jordan said. This is a great place to learn about media queries and responsiveness: https://www.udacity.com/course/mobile-web-development--cs256
You could do this to resize the page to fit any screen:
body {
background: white;
width: 100%;
}
.content {
width: 100%;
}
.paragraphs {
width: 50%;
margin: 0 auto;
}
<html>
<head>
<title>Example of resizing</title>
</head>
<body>
<div class="content">
<div class="header">
<h1>Header</h1>
</div>
<div class="paragraphs">
<p>#000000 color RGB value is (0,0,0). This hex color code is also a web safe color which is equal to #000. #000000 color name is Black color.
#000000 hex color red value is 0, green value is 0 and the blue value of its RGB is 0. Cylindrical-coordinate representations (also known as HSL) of color #000000 hue: 0.00 , saturation: 0.00 and the lightness value of 000000 is 0.00.
The process color (four color CMYK) of #000000 color hex is 0.00, 0.00, 0.00, 1.00. Web safe color of #000000 is #000000. Color #000000 rgb is equally color.</p>
</div>
</div>
</body>
</html>
Thanks
There are a lot of ways to make a DIV responsive.
The easiest one is to use a framework like bootstrap that does all of the work for you.
The other way is to use #media('max-width: 1024px'){//code...}
this way you will define what will happen in each of the screen resolutions you want.
I have several images(not background images) on my webpage, When I see the Print Preview at 100% scale, images looks fine, but My problem is that when I do a print prview with Shrink to fit scale, all the images are coming smaller than the actual size. I have not supplied any width or height attribute on IMG tag so I assume that in print preview it will load as they appear on screen. I have used below css for print media for IMG but it did not work
img {max-width:100%; }
I am expecting the same image dimension in Shrink to fit and 100% scale.
Is this possible? am I missing something in print css? Please advice.
While working on my project, when I needed to get the original size of image in print preview, I had to use !important. Otherwise, it wouldn't overwrite the style defined initially for the image on the page.
I also had to modify the height of image containers:
#media print {
.logo-container,
.img-wrapper,
img {
max-height: none !important;
height: 100% !important;
}
Do you have your images inside 'container' or 'div' etc? you should create print style for them also not just for the img elements.
I would suggest to use the same style on your elements both for screen and print , like so(this is my print.css):
/*How they look like on the print preview*/
#media print {
#poweredbyLogo{
width:213px;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
.col-md-6.a1{
background-color: #0000f6!important;
}
.col-md-6.a2{
background-color: #d3d3d3!important;
}
}
/*How they look like on the screen*/
#media screen {
#poweredbyLogo{
width:47%;
}
#logoframe{
height:80px;
margin-top:6px;
}
.space{
padding-left:20px;
}
}
Hope helps, good luck.
Also you can try this.
<img class="application-logo res-media" width="65" height="65">
#media screen {
.application-logo{
width: 65px !important;
height: 60px !important;
cursor: pointer;
margin: 25px;
}
}
#media print {
.application-logo, ._imgcont, img {
max-height: none !important;
height: 65px !important;
}
}