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; }
Related
I have a container which can have different sizes depending how the user moved some elements on the screen.
Inside this container there is an image and a text. The image fills out 80% of the height of the conainer and the text should fill out the other 20%.
While the height: 80% works fine for the image font-size: 20% doesn't work for the text. I can't use vm or vh since the size has nothing to do with the screen size.
I found this link that should be helpful: LINK
flexFont = function () {
var divs = document.getElementsByClassName("flexFont");
for(var i = 0; i < divs.length; i++) {
var relFontsize = divs[i].offsetWidth*0.05;
divs[i].style.fontSize = relFontsize+'px';
}
};
window.onload = function(event) {
flexFont();
};
window.onresize = function(event) {
flexFont();
};
#font-face {
font-family: "San Francisco";
font-weight: 200;
src: url("//applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff2");
}
body, html {
height:100%;
width:100%;
font-family: "San Francisco";
font-weight: 200
}
.flexFont {
height:8em;
width:75%;
background-color:#eeeeee;
padding:1%;
margin: 10px;
}
.smaller {
font-size: 0.7em;
background-color:red;
width: 10em;
}
<div class="flexFont">
<h2>This is FlexText:<br>Autoscaling by DIV width</h2>
<div class='smaller'>... scaled by 0.7em</div>
</div>
<div class="flexFont">
<p>Font size scales parallel to the container width.<br>Change window size to test.<p>
</div>
Without the use of VM/VH you would need to use a combination of javascript and CSS to achieve this. The code above should help in what you are trying to achieve.
Using a percent for font-size adjusts the font based on the current font-size for the document (it doesn't adjust the font to take up a percentage of the container). Check out CSS Font-Size: em vs px vs pt vs percent.
For example:
/* current font-size for the document */
html {
font-size: 20px;
}
/* results in 4px font-size for this div */
div {
font-size: 20%;
}
A site I'm busy working on has a section with some very large headings. There's something I'm not sure how to handle:
The heading may be one two short or long words, e.g: "Cyprus" to "Nouvelle Zelande", and it must scale to be roughly the width of the viewport. That means "Cyprus", being shorter, will have larger individual characters than longer text than "Nouvelle Zelande".
This would be relatively easy to do with JavaScript, I think, but I'd like to go for a pure HTML/CSS solution. So: how can I scale text to fit the width of the viewport? So far, I'm stumped and not sure how to do it, myself.
Some details:
You only need to target the most recent version of each browser, which includes IE11.
You may use any and all HTML5 and CSS3 that works within those browsers.
It's okay if you make the text "Nouvelle Zelande" word-wrap, as long as the longer of the two words still roughly fits to the width available.
You may add extra elements inside/around the headings.
Note that viewport units are not a solution. Previous questions asking about this (Pure CSS to make font-size responsive based on dynamic amount of characters, Font scaling based on width of container) have answers of "use viewport units, like vw!", but that doesn't handle this scenario at all, and astute readers even pointed this out. I've even used vw in the code sample below to demonstrate its non-solution-ness. It'll size based on the viewport just fine, but won't do any sizing based on the amount of text.
Code sample
h2 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 14vw;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
<h2>Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>
The only unit, if being used to set font size, that is relative to the size of its container, is viewport units vw/vh, which will not solve your case alone, even if the container is the same width as the viewport, since it does not calc the letter size to fit into the container.
The closest non-script solution I can come up with is to use the CSS element counter trick, and wrap each letter in a span
The 130vw I set here, worked best for the given font, though this might need to be adjusted based on which font family is being used.
h2 {
display: inline-block;
font-family: sans-serif;
text-transform: uppercase;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
/* 1 letter */
h2 span:first-child:nth-last-child(1) {
font-size: 130vw;
}
/* skipped 2-5 in this demo */
/* 6 letters */
h2 span:first-child:nth-last-child(6),
h2 span:first-child:nth-last-child(6) ~ span {
font-size: calc(130vw / 6);
}
/* skipped 7-14 in this demo */
/* 15 letters */
h2 span:first-child:nth-last-child(15),
h2 span:first-child:nth-last-child(15) ~ span {
font-size: calc(130vw / 15);
}
<h2><span>N</span><span>o</span><span>u</span><span>v</span><span>e</span><span>l</span><span>l</span><span>e</span> <span>Z</span><span>e</span><span>l</span><span>a</span><span>n</span><span>d</span><span>e</span></h2><br>
<h2><span>C</span><span>y</span><span>p</span><span>r</span><span>u</span><span>s</span></h2>
Here is the same concept using a script, and without the span's
(function (d,t) {
window.addEventListener("resize", throttler, false);
window.addEventListener("load", throttler(), false); /* run once on load to init */
function throttler() {
if ( !t ) {
t = setTimeout(function() {
t = null;
keepTextFit(d.querySelectorAll('h2'));
}, 66);
}
}
function keepTextFit(el) {
var f = el[0].getAttribute("data-font");
for (var i = 0; i < el.length; i++) {
var c = el[i].textContent.split('').length;
el[i].style.cssText =
'font-size: calc(' + f + ' / ' + c + ')';
}
}
})(document,null);
h2 {
display: inline-block;
font-family: sans-serif;
text-transform: uppercase;
white-space: nowrap;
overflow-x: hidden;
margin: 0;
}
<h2 data-font="130vw">Nouvelle Zelande</h2>
<h2>Australia</h2>
<h2>Cyprus</h2>
Note, since resize events can fire at a high rate, the throttler is used to reduced the rate so the handler doesn't execute expensive operations such as DOM modifications too often.
If you want to make a perfect fit, check this post: fit-text-perfectly-inside-a-div
If you are looking to use a plugin there's
http://fittextjs.com/
wich can do that for you
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>
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.
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