what is right settings when using max-width vs min-width
max-width(99px) and min-width(100px) (what about 1px between then ?)
or
max-width(100px) and min-width(100px) (which will be applied for 100px here ? )
If you're going to use media-queries on a specific element and target both max and min-width, you should use the same pixel value for each. For example, the min-width: 800px specify the styles when over 800px in screen width. max-width: 800px specifies the style changes on 800px and below. Using the same value for both queries insures that the specified styles are executed.
So in your example, the 1px between won't be a factor because there are no pixels between 99 and 100px and you have styles specified for both. If you used 798px instead of 799 there would be 1px where the element defaults to the non-media styles (if any).
Note: the max-width styles will prioritize over the min-width styles if using the same value when at 800px.
#media only screen and (min-width: 800px) {
img {
width: 100vw;
height: 100vh;
}
}
#media only screen and (max-width: 800px) {
img {
width: 50vw;
height: 50vw;
}
.img {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
}
<div class="img">
<img src="https://dummyimage.com/600x400/000/fff">
</div>
Related
I try to create a media gallery in my angular app
I would like to create a responsive gallery which respect these rules :
every media will be 200px width
The items will wrap inside the container
Have a fixed media number per row before wrapping no matter the resolution of the screen
I mean having a flex container with wrap but having an overflow-x at the same time if resolution needs it
Is it possible to combine overflow-x with flex-wrap ?
Here is a codepen of my try, each item have min width of 200px and flex-basis of 25% to fit 4 in a row
.wrapper {
background: #456173;
display: flex;
justify-content: center;
gap: 1rem;
padding: 1rem;
width:500px;
flex-wrap: wrap;
overflow-x:auto;
}
.cards-content {
align-items: center;
background: #fff;
border-radius: 1rem;
color: #111;
display: flex;
font-weight: 900;
justify-content: center;
flex-basis: 25%;
min-width:200px;
}
https://codepen.io/Eytan20/pen/bGxdRYv
Your Wrapper has an absolute width of 500px, thats why it is not responsive. You can use media-queries to add styling only for mobile for example and set the width to 100%.
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 425px) {
.wrapper {
width: 100%;
}
}
From this question, I know min-width has precedence over max-width.
My question is how do I achieve the following:
I want a div to be 50% width, but no less than 350px width, unless the view port width is less than 350px, in which case I want the max-width to be 100%.
If I use the following:
.half-right {width: 50%; float: right; padding: 2em 4em; min-width: 300px; max-width: 100%;}
the min-width overrides the max-width, and there is some bleeding outside 100% of the width.
Help appreciated.
Add a media query
#media screen and (max-width: 350px) {
.half-right{
width: 100%;
}
}
I have a simple question: How do I make an image properly respond to the viewport?
I have a 400 pixel (400px) wide and tall image, and I'd like it to become only 90% of the viewport width (90vw) when the browser is resized, so here is my current code:
img {
width: 400px;
height: 400px;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
But the problem is that the image doesn't adjust at all with this current code.
When I put max-width in place of width only the width of the image adjusts while the height does not leaving me with an elliptical and distorted image.
Is there an easy fix to my problem?
Setting both height and width in CSS for an <img> is prone to distorting it. If you don't want that to happen, you should just specify one dimension and set the other to auto. Considering your image is, in fact, 400px × 400px, here's what you should use:
#myImg {
width: 400px;
height: auto;
}
#media (max-width: 440px) {
#myImg {
width: 90vw;
}
}
/* optional, for centering */
#myImg {
display: block;
margin: 0 auto;
}
<img src="http://via.placeholder.com/400x400" id="myImg">
Play with it here. Note I used 440px so there wouldn't be a jump from 400px to 360px when crossing over the 400px device width limit. You can, of course, use 400px if that's what you want.
Try object fit.
img {
width: 400px;
height: 400px;
object-fit: cover;
}
#media screen and (max-width: 400px) {
img {
width: 90vw;
height: 90vh;
}
}
Or for better browser compatibility you can also use a background image instead.
For that you'd need to set two #media queries, one for horizontal, and one for vertical adjustment, both set to 400px. With the horizontal one, you only use the width, and with the vertical one, only the height:
body {margin: 0}
img {
display: block; /* removes bottom margin/whitespace */
}
#media (max-width: 400px) {
img {width: 90%}
}
#media (max-height: 400px) {
img {height: 90vh}
}
<img src="http://placehold.it/400x400" alt="">
I was wondering if there's a way I could simulate the col-md, col-xs for the height attribute of one of my CSS class. I understand I have to use LESS in my CSS, but I can't manage to get it to work.
In this example, I want a height of 10px if the screen is a mobile phone (768px). Do I have to compile the LESS somehow ?
.master-body {
border: 1px solid #bdc3c7;
background-image: url(../../ressources/noise_lines.png);
background-repeat: repeat;
height: 75vh;
overflow: auto;
}
#media (min-width: 768px) {
.master-body {
height: 10px;
}
}
Change min-width to max-width to target all small devices.
Being a designer today, one of the biggest obstacles of my life today is placing an image on a web page that fits in all browsers on all devices. Just to fit one image I tried to create a code like below and check by height and made sure image fit and image is in the middle of the screen. All I want is to put an image that is 600x894 in the middle of the screen regardless of the device and browser. If the screen size is smaller then image should be smaller as well. What is best way to do this?
img {position:absolute;left:50%;top:50%;display:block;}
#media only screen and (max-height : 600px) {img{width: 389px;height: 580px;margin-left: -194px;margin-top: -290px}}
#media only screen and (max-height : 700px) {img{width: 456px;height: 680px;margin-left: -228px;margin-top: -340px}}
#media only screen and (max-height : 800px) {img{width: 524px;height: 780px;margin-left: -262px;margin-top: -390px}}
#media only screen and (max-height : 900px) {img{width: 591px;height: 880px;margin-left: -295px;margin-top: -440px}}
<style type="text/css">
img{
display: block;
margin: 0 auto;
max-width: 100%;
}
<img src="http://static.jsbin.com/images/dave.min.svg" alt="">
http://jsbin.com/wusoxilero/1
You could do something like the following. Try resizing the browser and look at how it resizes according to the width of the screen and it is always centered.
html, body { height: 100%; width: 100%; margin: 0; }
div {
display: block;
background: red;
height: 100%;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
width: auto;
display: block;
}
<div>
<img src="http://fc06.deviantart.net/fs17/i/2007/149/0/4/fire_wolf_by_frenky666.jpg">
</div>