I've come across this website: http://ethanmarcotte.com/ and when you scale the page down to tablet size, the logo which is Ethan Marcotte is in perfect ratio when the screen size gets bigger and smaller.
How would I go about replicating the same idea, having an image that is the same perspective no matter what screen resolution or what size the browser window is that it's being rendered on?
img {
max-width: 100%
}
If you want that this only happens at smaller resolutions you can add this and style the image between this.
#media screen and (min-width: 768px) {
}
Related
I've made the following website using Bootstrap to get my images responsive. When resizing in width the images are perfectly responsive. However, when resizing in height, the images don't resize.
What would be the best way to get this working?
http://bartoosterveer.nl/Jacowebtest/
Bootstrap works the responsiveness with the width, It assumes the height will have no relevance since you can scroll... if you want your images to resize width the height, but keeping the same width, it might distort the quality of the image.
Now, as for how to do It the only way I can think of right now is implementing some media Queries for some heights.
i.e:
#media (min-height: xxx px) and (max-height: xxx px)
{
#imageID
{
height: the height you desire for this range;
}
}
hope it helps
background
Bootstrap
Fixed top navbar with brand logo for each client (logo configurable by client, size varies)
logo is background image for a brand hyperlink
Expected behavior
if logo is smaller than 60px, then show original logo;
if logo is larger than 60px, then scale it down to 60px wide
Have Tried
#logo {
background-position: left center !important;
background-repeat: no-repeat !important;
max-width: 60px;
}
Problems
hyperlink is not scaleable for some reason when apply different logo image backgrounds
if I add a width rule to #logo (width: 60px) to give it a static width, then large image will be cut off at 60px, not scaling down; then if apply small logos, there will be unused space on the right due to 60px static width
Fiddle link
click here to bootply
I am working on a fixed width legacy site and want to create a more optimal experience for tablet users by implementing a couple adaptive layouts. The first layout will be a 600px wide design and it will be displayed on devices with 600px - 768px screen widths. The second adaptive layout will be a 769px wide design and it will be displayed on devices with 769 - 1023 screen widths.
I want to know how I can use the viewport meta tag to make the designs scale up to fit into mobile browsers with widths larger than the original design.
For example, when the 600px design is viewed on a device with a 768px browser screen width, how can I make the smaller design take up the full width of the screen?
I have found a lot of information about adaptive layouts for websites with fluid grids, but nothing that specifically talks about the relationship between design width and viewport sizes for fixed width sites - at least not one that I can understand.
It is called responsive web development.
First step is to put below tag in your code inside head tag part.
For responsive design use media queries:
Now use the media queries, here is good example of media queries . Also learn how to use it.
Here is small snippet of code which will guide you how to use:-
<style>
.clear{ clear:both;}
/*this will work for desktop*/
#media only screen and (min-width: 801px){
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for tablet*/
#media only screen and (max-width: 800px) and (min-width: 521px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
/*this will work for mobile*/
#media only screen and (max-width: 520px) and (min-width: 320px)
{
#container {
position:relative;
width:80%;
margin: 0 auto;
}
</style>
Code:
#media screen and (min-width: 371px) {
.img_displayer {
display:none;
}
}
If i am not wrong, the above code says that if the min-width of the browser becomes 371px the .img_displayer element shouldn't be displayed. But right now when my site is open in full page, the image is not displayed. What am i doing wrong?
What your media query is saying is "if the media is a screen and is at least 371px wide, then hide the image".
I think you might have intended to use max-width:370px
Kolink explained it extremely well. Your image is displayed until the screen is 371px in width and then the display:none kicks in to hide the image. Here's a quick JSFiddle to demonstrate. If you resize the window so the Result window is less than 371 pixels your image will appear.
My site has a fluid design between 800px and 1280px. (I appreciate many display resolutions exceed this now).
In 10 inch tablets the site displays best with a viewport width set at 800px allowing the tablet to scale this to its window size. This way fonts are a decent size and images are not much affected by blurring given the small display.
Desktop browsers ignore the viewport meta tag and display between 800px and 1280px, and a background beyond this.
IE10 on Windows 8 however implements the viewport tag on both desktops and tablets and therefore implements the 800px layout on desktops. This results in unacceptably blurred images and giant text on larger displays.
Using CSS the best I approach I have been able to find is something like this (assuming the Windows Surface has a width of 1366px):
#media screen and (max-width: 1023px) {
#-ms-viewport { width: 800px; }
}
#media screen and (min-width: 1024px) and (max-width: 1366px) {
#-ms-viewport { width: 1024px; }
}
#media screen and (min-width: 1367px) {
#-ms-viewport { width: device-width; }
}
This still means desktops will have zoomed images and text unless the display exceeds 1366px resolution. Using max-device-width in the media query does not seem to offer much given that the Surface has a similar native resolution to many desktops.
Alternatively, I could detect the tablet and set the viewport width with Javascript or detect it with PHP and deliver a different stylesheet.
No doubt there is a better way to do this, preferably with CSS?
Thanks, appreciate any suggestions.