I have a site where I think
Most of my users are using desktop or laptop while they are on my site. The problem is that on some screens its only 1/4 of the screen begin used and rest is just background.
How can I make it auto scale, so it fits the screen's size??
You can use css3 transform:
-webkit-transform: scale(0.5); /* Chrome, Safari 3.1+ */
-moz-transform: scale(0.5); /* Firefox 3.5-15 */
-ms-transform: scale(0.5); /* IE 9 */
-o-transform: scale(0.5); /* Opera 10.50-12.00 */
transform: scale(0.5);
Calculate the scale ratio and apply the rules with this ratio in your script.
Do not forget to set left and top property of the transformized element as the offset ratio of the full width and height:
offsetRatio = (ratio - 1) / 2;
You would need to use CSS "responsive designs". You can find some examples here:
http://www.creativebloq.com/responsive-web-design/build-basic-responsive-site-css-1132756
Basically, you use min-width / max-width, and #media to decide what to show, and how.
If you are not comfortable doing that kinda stuff, then Bootstrap is a good way to accomplish this, with the minimum of effort:
http://getbootstrap.com/
.wrapper {
max-width:1000px;
margin:0 auto;
}
wrapper - is the main container of your site
Related
This problem seems to only happen on Safari (I tested on version 9.0.2).
If I scale my screen down to 565px width, or smaller, refresh the page, the <article>'s I have applied flipInX to flash on the screen and don't appear.
If I remove the margin-bottom: 40px; CSS from the <article> block, then it works.
Is this a bug in Safari?
Example
I had to add this CSS
.main {
-webkit-transform: translateZ(60px);
}
I tried to change the size of the paper-checkbox by changing the width and height attributes in my css-file, and by using transform: scale(2,2)
Scale makes it blurry, width and height only changes the clickable area.
How would I achieve this?
I think you found the correct solution already. You can't change the resolution, therefore there's nothing you can do.
For those who don't care about the blur, here's the css:
paper-checkbox
{
/* Double-sized Checkboxes */
-ms-transform: scale(2); /* IE */
-moz-transform: scale(2); /* FF */
-webkit-transform: scale(2); /* Safari and Chrome */
-o-transform: scale(2); /* Opera */
padding: 10px;
}
In polymer 1.0 and paper-checkbox 1.2 it works with this simple style
paper-checkbox {
--paper-checkbox-size: 30px;
}
When I was first trying to use paper-checkbox bower installed version 1.0 for me. And this version had issues. So maybe this might be the case for you as well.
I have this stylesheet
.rotate div img
{
-webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
-webkit-transform-origin: top right;
-moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
-moz-transform-origin: top right;
-o-transform: rotate(90deg); /* Opera */
-o-transform-origin: top center;
-ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
-ms-transform-origin: top right;
-sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
-sand-transform-origin top right;
max-width: 100% !important;
}
I'm having trouble with IE, the transforms are applied and are showing on screen
but when I click on the print button, the printed result is without the transforms applied to it.
(added screen in the media to see the effects, before printing)
It works fine with Firefox and Chrome
EDIT
Yes, I was testing on IE9.
Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.
-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.
See http://caniuse.com/#feat=transforms2d for more info if needed.
I has same issue but resolved by setting up media attribute to style tag as follows
<style type="text/css" media="print">
No need for fancy prefixes, just use normal transform to target MS IE!
I have a customized content management system. I'm using CKEditor to change the content. I want a live preview of the webpage when I click submit button after edit. I'm using iframe but it shows horizontal and vertical scroll bars because the webpage is bigger in size.
I want to do it in a specific dimension to view a complete page means render the webpage in a smaller size. Even it is a image of webpage I don't have any problem.
I love css3please:
<style type="text/css">
.box_scale {
width:300px;
height:300px;
-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
-moz-transform: scale(0.5); /* FF3.5+ */
-ms-transform: scale(0.5); /* IE9 */
-o-transform: scale(0.5); /* Opera 10.5+ */
transform: scale(0.5);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
</style>
<div class="box_scale">
<iframe width="300" height="300" src="http://example.org"></iframe>
</div>
The only thing besides selecting a scale was to add a width and height to the div. of course, you might want to add some rules for transform origins as well. See also: https://developer.mozilla.org/en/CSS/transform
or control the rotation to specific degrees with CSS
You can use transform: rotate(35deg). More in this article. For the moment, you have to add in the vendor-specific transforms as well, so for instance (cribbing from the article):
.rotate35 {
/* Safari */
-webkit-transform: rotate(35deg);
/* Firefox */
-moz-transform: rotate(35deg);
/* IE */
-ms-transform: rotate(35deg);
/* Opera */
-o-transform: rotate(35deg);
/* Standard */
transform: rotate(35deg);
}
You can do a 35-degree angle for older IEs that require filter. This will work in IE7 and IE8:
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.81915204, M12=-0.57357644, M21=0.57357644, M22=0.81915204,sizingMethod='auto expand');
Note, however, that the matrix transformation will leave you with a different offset than the CSS3 way shown above. You can compensate on the CSS3 side by setting the -webkit-transform-origin to left top, or on the IE side by positioning your element with a conditional style sheet or CSS hack.
Check out the MS docs or the cool page I used to generate the above.
There is but its CSS3, it of course presents problems when it comes to 'cross-browser' support. But short answer, yes, in CSS3.
Example link: http://www.thecssninja.com/css/real-text-rotation-with-css
Use
-webkit-transform:rotate(35deg);
-moz-transform:rotate(35deg);
transform:rotate(35deg);
for nearly all browsers.
Check this out: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215, more specifically the rotate(angle) function.
Note that this works only in CSS3.