When I get a psd(1750*2400),I found the images and font size were too big for lower resolution.Is it possible to make page fit in different resolution ? Thanks.
I usually divide this into 2. What I mean is that the dimension of the website, in this situation, is 875x1200. Thus for every spec, such as fonts, block width, image width should be divided into 2.
For example, the Header font size is 42px then you could apply 21px.
For images you can do this purely with CSS by specifying the width and height of your preference. The browser will resize the image (though if you don't choose the right aspect-ratio the image may look obviously expanded or compressed).
img {
height: 300px; //whatever height you want
width: 200px //whatever width you want
}
For a responsive layout you can use CSS3 media queries to achieve the best look on different resolutions.
Example for responsive layouts:
img {
height: 100%;
width:100%
}
#media screen and (max-width:64em) {
height: 70%;
width: 70%
}
As for the font-size, you may have to sacrifice pixel-perfection at times for the best look and decide for yourself whether the font looks appropriate for the display or not.
This too can be controlled by using media queries though:
#media screen and (max-width: 32em) {
font-size: 1.5em
}
Related
The "rh" logo on my site is responsive vertically, ie fits perfectly to a tall thin window, but does not resize to a wide short window. Could anyone help me make the logo responsive to both width and height?
here is the website... (takes a bit to load up)
http://rhwebdesign.co.uk/
Here is my CSS:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
To be very specific and address your questions about the logo, consider setting the max-height relative to the window's height.
You have:
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.hero-logo img {
max-width: 100%;
min-height: 100%;
padding: 20px;
}
In order to scale the logo, add in to the latter block:
max-height: 100vh;
This sets the images maximum height to 100% of the viewport height, which appears to be what you desire here. Note that there is some text beneath it, which is not displayed, since it is text wrapped in an H5. These two lines are 68px tall (40px padding plus 28px for the text). So, you can adjust the above to:
max-height: calc(100vh - 68px);
It looks like in landscape mode (480x320), there is a script not calculating the size of margin correctly.
<div class="container hero-content" style="margin-top: -97.5px;">
have a look in main.js for this function:
heroContent.css({
"margin-top" : topContentMargin+"px"
});
Which is this:
topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),
I haven't really looked into why it is calulating it incorrectly. My guess is that heroContent is too high for landscape mode because the image becomes 441px high with the media query max-width:100%. So it tries to add a negative margin to compensate.
My advice would be to remove the jQuery calculation of the hero content sizing and apply sizes using css and media queries only.
Edit:
You need to be more specific with your css. Learn some more about css specifity. You should include your largest media queries at the top, so the smaller ones will take precedence at the bottom. Makes things easier. Also IMHO, I wouldn't use queries for anything larger than iPad. ie. 1024px. Although you should always test on newer devices if possible.
You will need to specify the height of the video for each specific device size. I can't tell now, but maybe jquery was determining the section heights, so now the css is determining the video height.
So at the bottom of your style sheet, try this.
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:940px !important;
}
#media (max-width: 480px) {
.hero-logo img {
max-width:55%; /*looks nice at 480 */
padding:20px;
}
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:320px !important;
}
}
#media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
min-height:480px !important;
}
}
But Richard, to be honest, you should be troubleshooting and testing the design yourself. How will you ever learn if you don't try. Remember, firebug is your best friend :)
I currently have a header which is of an image (the width = 1920px and height = 250) It sits at the very top of the page, and looks well with some resolutions.
But when i got to a resolution that actually changed my screen size, the image is still 1920px and then allows me to scroll. Is there a way of making it scale down to fit the page?
You can make your image responsive.
You can use bootstrap and add class for your image.
e.g
<img src="xyz.png" class="img-responsive">
OR
You can manually try to make your image responsive with CSS rules.
e.g
max-width:100% !important;
max-height:100% !important;
display:block;
You will have 2 things here.
As the screen size differs your image should get fit in the window.
You need to maintain the aspect ratio of the image in responsive design, otherwise your image will be stretched out (It is a challenge to maintain aspect ratio in responsive design).
For the first one you can use width:100% and height:auto also max-width:100% to make sure it does not cross your section.
If you are designing based on some particular resolution then use media query
#media (max-width:768px)
{
width:... // define your width based on the resolution
}
Now the 2nd point : How to maintain aspect ratio. Follow the steps here:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Also, found a stackoverflow post, which will be useful to you :CSS force image resize and keep aspect ratio
You may use the responsive image code that is:-
img {
width: 100%;
height: auto;
}
Else if you have images for multiple resolutions you are recommended to use media Queries:-
//set width as per requirement
#media (max-width: 900px) {
background-image: url(img/cover.jpg);
}
How are you showing the image in the header? Using img tag or using background-image CSS property?
If you are using <img> tag, then you need to set max-width: 100%;
If you are using background-image property, then you need to set background-size: 100% auto;
Hope this help
Thanks
How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.
If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.
width:20%;
max-width:100px;
This sets the width to 20% but caps it at 100 px.
One way to accomplish this is to simply use two divs
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer {
max-width: 90%;
}
.inner {
max-width: 100px;
}
</style>
This will NOT work with different image sizes/aspect ratios. You can define max-width and max-height separately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.
Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.
.img-class {
max-width: 50%;
}
#media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
Tested on latest Chrome, Firefox and IE.
You can now use css min. But you should note that IE does not support it.
width: min(20%, 100px)
https://developer.mozilla.org/en-US/docs/Web/CSS/min()
I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a width would not satisfy the requirements.
To expand on #Kiaurutis' answer:
img {
max-width: 400px;
}
#media (max-width: 400px) {
img {
max-width: 100%;
}
}
A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).
To adjust for margins, borders and other stuff you might have on the image, just increase the #media's max-width.
Don't do this.
I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-width property to the lower of the two values, not the width. This also can be done, please see below.
Note: This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-width property is the lesser of 20% or 100px.
img {
max-width: 20%;
}
#media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
img {
max-width: 100px;
}
}
I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS
.wrap{max-width:95%;margin:0px auto;}
#media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
I have some question about html and css.
Here are the case. I'm building a mobile web, which my base line is 240px width. So all my elements's dimension is set base on the 240 screen size. But when I view the web in a larger phone like Samsung Galaxy note. All things seem to be too small for user to click on it.
Now the question, is it possible to use variable kind of css for width and height ??
Lets say, the thumbnail I use in 240px width device is 50px, so when I view my thumbnail in a 480px width device, the thumbnail will be display in 100px, which means the thumbnail will be increase its size based on the percentage of the screen increased.
Yes, obviously you can, what you are looking for is called Responsive Design, to accomplish that, you will need #media queries.
Demo (Resize the window to see the effect)
div {
height: 200px;
width: 200px;
background-color: tomato;
}
#media all and (max-width: 400px) {
div {
height: 100px;
width: 100px;
}
}
Use percentages for your width instead of fixed width to make the images responsive.
For example, use 100% instead of 50px. It will automatically fill the container (in which the container is also responsive) and automatically resize on your browser.
yes ,it is possible,responsive design achieve in following ways,
All dimension in %
media queries
yes, you can use #media queries for responsive design
example:
div{
width: 50px;
}
#media all and (min-width: 480px){
div{
width: 100px;
}
}
(or) u can also use percentages at certain cases like width: 20%
I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.
I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?
While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (#media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).
Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Edit- added code
Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.
Short Answer
You can't have fluid font sizes, but you will when viewport-percentage lengths are widely available.
Long Answer
You have to understand these two terms: responsive and fluid.
Responsive means you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippest words in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.
Fluid means you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.
Example
Let's say you have a <div> inside the document body and you want it to fill half of the window.
The responsive solution is this:
#media (max-width: 1px) {
body > div {
width: 0.5px;
}
}
#media (max-width: 2px) {
body > div {
width: 1px;
}
}
#media (max-width: 3px) {
body > div {
width: 1.5px;
}
}
#media (max-width: 4px) {
body > div {
width: 2px;
}
}
/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */
And the fluid solution:
body > div {
width: 50%;
}
So?
What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluid font sizes" and go responsive.
use calc with media query for a responsive and fluid font
#media screen and (min-width: 25em){
div {
font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
}
}