Css change percentages on aspect ratio

Question

Ok, so i build a site in percentages for an aspect ratio of 16/9. If i scale the website and the aspect ratio on my website changes, all elements fly in a different direction.This is because the height and width dont keep the same aspect ratio as in which i build it. There is the max and min width in css. But these dont exactly help me with my problem. I know i messed up, but is there a way to target aspect ratio`s and make my percentages respond to the different ratios?

if not, got any tips to make my website cool looking on ANY screensize? BTW you can find my website on: www.joeptenhaaf.nl

Please help me :)

Joep

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Jun 09 '15 at 09:07
Possible duplicate of [Maintain aspect ratio of div but fill screen width and height in CSS?](http://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css) — insertusernamehere, Jun 09 '15 at 09:09
The first thing you should do is clean up the errors on your site. ` ` should be at the top of the page, not tucked away after the ``. You have attribute values with a starting quote but without an end quote; things like that. The rest is simple: just don't assume anything about the screen size; don't even assume that the browser window is the same size as the screen. For instance, when you give an image a width (whether it be in percent or not) leave its height set to `auto`. Test with smaller HTML documents first to get the hang of it. — Mr Lister, Jun 09 '15 at 09:48

score 1 · Accepted Answer · edited May 23 '17 at 12:22

You could put everything in a wrapper div whose aspect ratio is maintained using the answer here (maintain aspect ratio of a div)

Alternatively, or in conjunction, you could use CSS media queries to make the site display differently in response to different display sizes (width, height or both). This all goes in the CSS. One way is to build the site's layout CSS for a smaller screen first, and then add the media query containing the modified CSS values for the same elements at every larger size value, ex. resizing header text size for phone, tablet, and computer sized devices:

header {
font-size: 14px; }

@media only screen and (min-width: 481px) { 
header {
font-size: 20px; }
}
@media only screen and (min-width: 800px) { 
header {
font-size: 40px; }
}

You could also start with making the site for a bigger screen, and then having a media query like:

@media only screen and (max-width: 799px) {

}

You can also make it respond to height.

Hope this helps!

edit: I think I might have misinterpreted your question. You can media query in response to aspect ratios too though, so this would be your solution!

Css change percentages on aspect ratio

1 Answers1