I am using bootstrap for my site. The responsive according to different screens is good unless i see on a square shaped large screen. The content is centred on normal screen using padding top and i want it do be at the bottom when it is viewed on a square shaped screen, since it looks odd with the white space left below. How do i make it responsive to square shaped screens or say large screens ? I tried making the position relative to the bottom, it doesnt work !
You can use media queries to target screens based on their pixel aspect ratio like this:
#media screen and (max-aspect-ratio:1/1) {
/* square styles here */
}
Here's a Fiddle of it in action.
This particular query only targets screens that are equal in height as in width or taller. If the aspect ratio is higher than 1:1, it means the screen is wider than it is tall.
If you want to target squares precisely, you can use :
#media screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:1/1) {
/* square styles here */
}
I wouldn't recommend this though, as it will only fire at that exact pixel ratio, giving you no tolerance for varying display sizes, as you'll see in my Fiddle example above to this one. This could be making a lot of extra work for yourself.
Square screens are unique as normally a screen is either portrait or landscape in orientation, but a square screen can be neither. They are also quite rare as a display. Are you targeting Smartwatches perhaps?
Update in Jan 2023: Smartwatches have exploded in popularity and greatly-improved screen tech means displays are no longer restricted to oblongs like squares and rectangles. Displays can have rounded corners, be curved, fold open like a book, be circular etc.
All the more reason not to target exact sizes and ratios!
Related
I'm working with images that have been aligned with rule-of-thirds on the focus of the image, and background-image to put the image in the page.
When a user is on a tablet (or bigger) device, I'm using background-position:50%; which is fine; I don't mind that the picture is aligned off to the side.
However, on mobile devices, I would like the subject (which is on the right rule-of-third line -- see my JSBin for an example) to be horizontally centered on the screen. I know that I can use different percentages, such as background-position:75% 50% to get it close, but as the width of the device changes the 75% is no longer "center".
Is there a way, without writing a hundred different media queries so that it's always centered, to have background-position be dynamic enough to always center an image on mobile?
Here's a JSBin of what I'm looking at.
Some assumptions:
Pictures will always be aligned on rule-of-thirds
Pictures will always have the same physical dimension
Work in IE9+
Not worried about vertical alignment
For smaller than 768px try:
background-position: -50vw;
And you may have to set the background size to 150% instead of cover for this case.
The W3C documentation states the following:
Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
This kind of makes sense for standard elements, like divs and tables. If the screen has a greater pixel density, more real pixels are reserved for a CSS pixel, in order to keep the actual element dimension roughly equal on all the screens regardless their density. In this sense, CSS pixels can be seen as a pseudo-absolute length measure.
But what about images? I know it's bad practice to let the browser to resize images. But then how source image's pixels are treated? I suppose it can't be the same as other elements, otherwise I would get a low resolution image on high-density screen, given that more device pixels are assigned to a single image pixel.
If the resolution of an image is lower than the resolution of the screen, the graphic card will add pixels to make the image fill the pixels needed.
So if your image has the same resolution than your screen, each pixels of the image is rendered in each pixels of your screen.
But if your image has a lower resolution than your screen, and if the graphic card would not do the job, your image would appear smaller because it has not enought pixels to fill your actual screen resolution.
As your can see, the graphic card will always force a middle color, which is a medium between your two colors.
Obviously, if you image if a full black pixels, the middle color of black-black is black, so the image will not appear stretched.
Using css, how can I make div to incrementally move to the leftmost position, i.e, touching the left screen border, as the browser windows is resized? It means, div should keep moving to the left till it touches screen browser left border, as browser is being resized.
#element {
position: absolute;
top : 40px;
left : 300px;
}
If I provide value in percentage, for left, it shifts gradually to left, but still that percentage is maintained. I want it reduced to 0 or some other lower value gradually, so that there is more space on right side.
So you have a couple options. The most "smooth" would be to use a percentage and then at a certain point that you decide, a certain minimum screen width, you would put 0% or remove float or whatever it is you want to do. There would be a point at which it would sort of "snap into place" but if you make it a small resolution, say one used by phones in landscape, no one would ever see it snap. In order to accomplish this do as #Raunak Kathuria said and use a CSS media query, if you need an example of one I can write one, but it's pretty basic and there are tutorials everywhere. Just search for CSS media queries.
You other options would be to use a series of media queries, each moving the div to different locations. This wouldn't be gradual, it would be at certain screen sizes.
A lot of people when doing responsive design, myself included, get caught up on what the page looks like and acts as it's actually being resized. In reality this isn't important. I would argue the overwhelming majority of people don't resize their browser as they are viewing a website. They browse and move on. So as long as your page looks as you like it to at whatever screen size, the gradual movement is irrelevant. That's why I personally prefer media queries to a flexible layout. It provides the pixel control I desire.
preamble:
I am using a somewhat responsive theme (skeleton).
it changes the layout to a single column for small screen sizes,
my problem is:
my header image (that i inserted using the theme options in the admin panel) is not scaling when the screen is resized. it remains at 940x150 all the time.
when viewed on mobile this is causing a full sized header with content in a single column on the left, so im left with all kinds of whitespace.
I would like to: cause the image to scale down with the screen width
OR
replace the header image with one meant to fit smaller screen sizes.
the problem with option 2 is not all devices have the same screen width so it still needs to be scaleable to a point.
Ideally:
when above the below stated width, the image will scale to fit the screen between the 700-something (ipad landscape) and the 940 standard.
when below a certain screen width (say below tablet/ipad size, so 700-something max-width), the image is swapped for the smaller one, which then scales up or down between 300 and 700-something (just below the ipad size).
in this way the image would always be a decent size for the rendering of the site.
the problem with this particular image is the amount of whitespace (empty space) in the middle.
below a certain width, i would think the elements of the image would become artifacted and messy with so much space between them.
the site:
porthuronairportshuttle.com
Add this to your css:
img {
height: auto;
max-width: 100%;
}
I figured it out. It was actually a matter of removing the header I uploaded with theme options and uploading it with wp core functions. Then I moved the nav bar in the header.php and after some tweaks with margins and padding - poof!
A client wants to have an image that takes up entire screen, on mouse over the menu would appear. The problem is the height vertical alignment for various screen sizes....What would be the most common sleek looking solution to this issue? Let's assume that the most common screen resolution for the site's audience is 1024x768 but it should look good on smaller resolutions too (specifically for laptops).
My initial idea was to use an image such as 1000x600 and black background...any other ideas?
Thanks!
Compare the aspect ratio of the screen with the aspect ratio of the image, then scale the image appropriately. For example, if the aspect ratio (width / height) of the screen is larger than the aspect ratio of the image, then it's too wide - so scale the width of the image but keep the height the same size as the viewport. Visa versa for if it's smaller. I think you can use PHP to achieve what you want.