I am writing a small game using bootstrap and want the font size to remain proportionally consistent on a phone, tablet and PC.
<h1>Points: {{points}}</h1>
The trouble is that the above is much smaller on higher level resolutions and it wrecks the layout I have designed for the game.
How do I solve this issue?
As suggested by #ckuijjer, the vw unit works well. As you resize the window, the font size resized in proportion to the size of the window.
#media all {
h1 { font-size: 6vw;}
h2 { font-size: 5vw;}
h3 { font-size: 4vw;}
h4 { font-size: 3vw;}
h5 { font-size: 2vw;}
h6 { font-size: 1vw;}
}
You can use %. This makes the font size depend on the screen size. Media queries might help to find time this..
Related
`#media screen and (max-width: 768px) {
.my-element {
font-size: 16px;
}
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
.my-element {
font-size: 18px;
}
}
#media screen and (min-width: 1024px) {
.my-element {
font-size: 20px;
}
}`
I was expecting the font size of .my-element to adjust based on the screen size, but it doesn't seem to be working. What am I doing wrong?"
Make sure that the .my-element class is being applied to the correct element in your HTML. If it's not, the font size won't adjust as expected.
Check that there are no other styles elsewhere in your CSS that might be overriding the font size changes made by the media queries.
Try adding the !important declaration to the font-size property in each media query to ensure that it takes priority over other styles. However, it's generally not recommended to use !important unless it's necessary to do so.
Verify that your browser window size is within the range specified by one of the media queries. If it's not, the font size won't adjust until the screen size meets the criteria of one of the media queries.
As you can see from the image, the iframe content is too big and it hides the X button + Sources bar.
Is there any option to make it's content a bit smaller?
This css seems to be the problem:
##media only screen and (min-width: 767px) {
#uw-glamor-396 .css-5anb0a, #uw-glamor-396 [data-css-5anb0a] {
position: absolute;
top: 50%;
left: 50%;
width: 767px;
height: 610px;
transform: translate(-50%, -50%);
border-radius: 5px;
}
}
If the height would be 450px instead of 610px it would fix the issue.
This fiddle raises the issue, open it with your laptop and expand a little bit the result window to get the Drag and Drop box.
This is how it looks like without the bookmark tab in my laptop with 100%, I use Chrome:
Unfortunately, it isnt possible to change this currently. Its a known issue but up until now there havent been any complaints that i know of. Typically apps that host the widget are in desktop resolutions so there's enough vertical space or its in mobile res and then the widget switches to the mobile layout.
Ill look into promoting this issue internally.
In the meantime, can you share some details about your app, how does it display the widget? What makes it not have enough vertical space?
The font size on the charts are to small and hard to read on certain colors. Is there a way to change these attributes?
I can do this do make the whole pie red but setting color or font-size doesn't make a change:
.ct-series-x .ct-slice-pie {
fill: #f05b4f
}
<div class="ct-chart ct-golden-section ct-series-x ct-slice-pie" id="chart2"></div>
For anyone who comes across this - override ct-label in your css file:
.ct-label {
font-size: 15px;
}
I've seen this a few times, only on Webkit. The scenario is that you have some text with a hover color, and it's using a webfont custom font. When you hover, part of the furthest right letter is not getting the hover color. To see what I mean, view this fiddle in Chrome or Safari, and look carefully at the "r" at the end of the text while hovering with your mouse, it is not completely red.
http://jsfiddle.net/jaredh159/xPZB8/
HTML from fiddle:
<a>Some Text Foo Bar</a>
CSS from fiddle:
#font-face {
font-family: 'stephanie_marie_jfregular';
src: url('stephanie-marie-jf-webfont.eot');
src: url('stephanie-marie-jf-webfont.eot?#iefix') format('embedded-opentype'),
url('stephanie-marie-jf-webfont.woff') format('woff'),
url('stephanie-marie-jf-webfont.ttf') format('truetype'),
url('stephanie-marie-jf-webfont.svg#stephanie_marie_jfregular') format('svg');
font-weight: normal;
font-style: normal;
}
a {
font-family: stephanie_marie_jfregular;
color: #000;
font-size:50px;
}
a:hover {
color: #ff0000;
}
What is this? Fixable? Is it just the case of a poorly created web-font file, or a bad font? Any one familiar with this issue or have a workaround?
The reason the right few pixels arent't given their :hover color is because they run outside the a container. Inspect it or give it a background color and you can see this. A workaround is faking the extra space by giving the a some extra padding-right.
I'm not sure how exactly the glyph is able to run outside the container, so I'm be interested if anyone else knows. For now I'm sharing celeriko's suspicion that this font's metrics are borked.
EDIT: Turns out it's the font's side bearings that allow for the glyph to run outside its bounding box. This is common with brush script fonts and allows individual letters to connect by slightly overlapping eachother. So it's a valid property of the font, unfortunately causing a problem the original typographers didn't have to account for — no hover states on paper ;)
Dear folks.
Imagine a sprite image called icons.png assigned to css class .icons with various 10x10px graphs. Now you want another class which scales up the sprite graphics exactly twice 200% (making them 20x20 pixels on the screen)
How do I achieve this enlargement purely in CSS?
Much appreciated!
.icons, .iconsbig{ /* WORKS FINE */
background-image:url(http://site.org/icons.png);
background-repeat:no-repeat;
vertical-align: middle;
display: block;
height:10px;
}
.iconsbig{ /* make this one twice as big as the original sprite */
background-repeat:no-repeat;
height:20px;
background-size: 20px auto;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
update:
problems with the above code:
It works in IE9, but not in FireFox, by most used browser doesnt know how to resize????
in IE9, the enlargement is smudgy and not neithrest neighbour pixel perfect at all??
It is supported in pretty much everything except for < IE9...
.iconsbig {
-moz-background-size: 20px;
background-size: 20px;
image-rendering:-moz-crisp-edges;
-ms-interpolation-mode:nearest-neighbor;
}
W3C spec.
Update
Looks like Firefox wants its vendor prefix (-moz) on the property.
You can use the css3 background-size property:
.iconsbig {
background-image:url(http://site.org/icons.png);
background-size: 20px 20px;
}