I have an image that I'm sizing with a percentage of it's container, what I would like to do is to lower that percentage when the container is bigger (window is maxed) and a higher number when the window is shrunk.
Rather then write a script using some type of switch or multiple if statements I was wondering if anyone had any ideas on a possible math formula solution kind of thing.
For example a width 1080px would have a result of 1% and
a width of 358px would have 5%
You should be able to use media queries for this with varying width sizes. There is really no magic mathematical formula for this.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use the following media query to achieve this:
#media only screen and (max-width: xxxpx) and (min-width: yyypx){
#container img{
width: z%;
}
}
Example:
#media only screen and (max-width: 400px) {
#container img{
width: 5%;
}
}
#media only screen and (max-width: 1000px) and (min-width:401px){
#container img{
width: 3%;
}
}
#media only screen and (min-width:1001px){
#container img{
width: 1%;
}
}
Replace the pixel values with the desired values and set multiple range as required
For more on media query read this:
http://css-tricks.com/css-media-queries/
Related
Currently I have the following for a react components css
export default styled.div
#media (min-width: getEmFromPx(400)) {
margin: ...
width: ...
:nth-child($2n+2) {
margin-right: 0px;
}
}
#media (min-width: getEmFromPx(700)) {
margin: ...
width: ...
:nth-child($3n+3) {
margin-right: 0px;
}
}
#media (min-width: getEmFromPx(1000)) {
margin: ...
width: ...
:nth-child($3n+3) {
margin-right: 0px;
}
}
I am setting which element in the div to apply the margin-right 0px while the other have a margin. This works perfectly on small screen sizes but for medium and large it seems the small nth selector is present and overriding the nth selectors in the medium and large... Is there a way to overcome this?
On chrome developer tools I can disabled the nth child selector for small screens which makes medium screens work perfectly. It was my understand that at different media screens the selector would be updated?
your first media query #media (min-width: getEmFromPx(400)) will be apply to all screens having 400px or greater than 400px, because you are using min-width (it is it should applicable min this and up all).
in your 2nd and 3rd media query you are doing same thing, so no need to write it twice.
Here you are setting margin-right: 0 to nth-child(3n+3), but you will have to reset nth-child(2n+2) element which is defined in previous media query. Because nth-child(2n+2) will be applicable all screens 400px above.
I have a image that have 1200 x 200px. On center of this image I have a space with 500 x 200px that is the main content of full image. On each side of this image, I have an additional content. Note: it is on a single image.
If the window width is reduced, then first it should consumes the additional content of the image, but cutting it, keeping image height intact. But if I reduces the window width below of the main content width (in this time, all additional content was cutted off), then now the image should be resized proportionally, affecting the height.
My doubts:
Is possible do it only with CSS?
If not, there are some JS library to do that?
If not, how I should structure the HTML, CSS and JS to do it works?
It's an example banner with full width: Note that is have a main content and two sides with additional content.
This image below should help understand: I tried to simulate a window width resize, on 1200 px, 1000 px and 500 px (that not affect height yet) then by 350 px (that affect and resize image proportionally).
#banner {
background-image: url("http://i.stack.imgur.com/csRha.png");
width: 100%;
height: 200px;
background-repeat: no-repeat;
margin: 0 auto;
display: block;
border: 1px solid red;
}
#media all and (min-width: 1200px) {
#banner {
width: 1200px;
}
}
#media all and (max-width: 1200px) {
#banner {
background-position: 50% 0;
}
}
#media all and (max-width: 500px) {
#banner {
background-size: 240%;
}
}
<div id="banner"></div>
Is possible do it only with CSS?
Yes, and you only need 1 <div>. Treat the image as a background image, positioned dead center with background-position. Then resize the <div> using media queries, setting widths to the designated breakpoints.
You might use a simple media query like this:
#media max-width: 500px {
#your-image {
width: 100vw;
}
}
Use media queries for adding images/elements and changing css.
As for your problem use percentages for re-sizing images.
I suggest to look up progressive enhancement and Responsive design.
Also look up view-port in case you are not using it.
Don't use VW there is not enough support yet in IE,EDGE(no support for VMAX) and Opera mini, ie8 (no support at all).
Using javascript I create a meta viewport and assign to it a value of 980px. The script is this:
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=980, user-scalable=1";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
In CSS, is it possible to write a media query that fires only when the viewport width is EXACTLY 980px?
Yes, in CSS it is possible to use #media rules to target an exact width.
CSS Example
#media (width: 980px) {
/* Your CSS */
}
This is telling the browser, when the viewport width is exactly 980px wide, apply the following CSS. When your viewport width changes to 981px or 979px or anything that isn't 980px wide, the CSS will be removed.
Unlike the other answers, this is not using max-width or min-width because the #media rules allow you to just define width, which will target the exact measurement you give it. The width is defined using the viewport width.
Note: You can learn more about the CSS3 #media rule from W3 Schools. Specifically if you look under Media Features, you'll see the available variables, including width all the way at the bottom.
You could do something like this. The media query will be triggered at 980px width and would work for width no greater than 980px.
#media screen and (min-width: 980px) and (max-width: 980px) {
html {background-color: red !important;}
}
html {background-color: green; min-height: 300px;}
You can use the exact width like this:
#media screen and (width: 980px) {
/* CSS rules here */
}
using both width and height exactly for ipad pro width:1024px, height:1366px
#media only screen and (min-width: 1024px) and (max-width: 1025px) and (min-height: 1366px) and (max-height: 1367px)
#media screen and (min-width: 980px) {
body {
background-color: lightblue;
}
}
I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}
The majority of desktop and laptop screens nowadays have a width greater than the height. The screen is "wide" not "tall." Smart phones have done something rather cool by enabling the orientation of the phone to influence how the content is presented.
I'd like to do this with media queries, so that if someone on a mac with a big monitor has their browser window sized so that it's very "tall" (height is greater than width) they would see a header and footer. But if they went fullscreen or "wide" (width is greater than height) they would see a sidebar on the left and maybe also the right.
I'm trying to take full advantage of wide screens, and orientations and such. How to do this with media queries or javascript?
I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/
Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your #media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate #media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )
Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.
/* 01 */
#media (min-width: 0) {
/* this is the same as not using a media query... */
.main-content {
width: 100%;
float: left;
}
.side-bar {
width: 100%;
float: left
}
}
/* 2 */
#media (min-width: 600px) and (orientation:landscape) {
.main-content {
width: 70%;
float: left;
}
.side-bar {
width: 30%;
float: left
}
}
HERE is a jsfiddle - note that box-sizing: border-box; is used for padding issues.
2017 UPDATE
I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/
.parent {
display: flex;
flex-direction: column;
}
#media (min-width: 600px) and (orientation:landscape) {
.parent {
flex-direction: row;
}
.child-1 {
min-width: 260px; /* or flex-basis: xx - try them both */
}
.child-2 {
flex-basis: 100%; /* "if at all possible... please try to be this size..." */
}
}
I know that this is an old question, but the solution that I used was this:
.main-content {
/* Default for when the height is greater than the width of the screen*/
width: var(--content-width-small);
}
#media screen and (min-width: 100vh) {
/* The width is greater than the height */
.main-content {
width: var(--content-width-wide);
}
}
This is much more intuitive, and works perfectly well (at least for me, because I wanted to have an image with dimensions based on whether the screen's height was greater than it's width or vise versa).
Media Queries are probably going to be your solution here for the modern browsers that support it. You can grab a copy of the documentation from here:
http://www.w3.org/TR/css3-mediaqueries/
But you might find the following tutorial useful (Google for: Media Queries Tutorial):
http://webdesignerwall.com/tutorials/css3-media-queries
Once you pick up the basics doing things like hiding elements if the screen falls below a specific resolution:
#media screen and (max-width: 600px)
{
.sidebar
{
display: none;
}
}
Hope this helps.
As stated prior, media queries are the way to go.
More specifically, if you are attempting to detect if the viewport is taller than it is wide (height > width), you might take a look at the aspect ratio documentation.
For example, let's say you wanted to hide or show a different title based on when the viewport is tall or wide. Since a 1/1 aspect ratio is a perfect square, you can use a combination of min-aspect-ratio and max-aspect-ratio to detect when a change between "tall" and "wide" occurs.
The code might look like this:
#media (max-aspect-ratio: 1/1) {
body {
background-color: cornflowerblue;
}
.wide {
display: none;
}
}
#media (min-aspect-ratio: 1/1) {
body {
background-color: whitesmoke;
}
.tall {
display: none;
}
}
#media (aspect-ratio: 1/1) {
.wide {
display: block;
}
}
<div class="wrapper">
<h1 class="tall">I'm taller than I am wide</h1>
<h1 class="wide">I'm wider than I am tall</h1>
</div>
There is a caveat, though. You might have noticed a third media query that checks if the aspect ratio is a perfect square. Because of how media queries currently work with min and max values, there is a 1px point where some weird stuff can happen, and both are active. Having a query that checks for this perfect square scenario prevents the screen from not displaying either title in the case where it is a perfect square.