I have modal that displays images. I set height of image in modal on 90% and width automaticly scales with it, so image is not stretched. But on the mobile phone I want the height to not be defined and I want to define only width to 100%. How do I make height of the image on small screen not defined? till now I have this code:
.image {
height: 80%;
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
/* make height not defined?!
}
}
Use height: auto; in mobile screens.
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
Related
I'm really confused. For some reason, my code just simply allow this happen. If I put height: auto;, the image disappears so I'm forced to put in a number manually, for example, 700px. Here's a JSFiddle for reference
How would I maintain this image's width and height in portrait view on mobile?
HTML:
<div style="background-image: url("https://mario.nintendo.com/static/fd723b2893d4d2b39ef71bfdb4e3329c/579b4/mario-background.png");" class="cpi-wall-detailed-image"></div>
CSS:
.cpi-wall-detailed-image {
width: 100%;
height: 768px;
}
Try something like this:
.cpi-wall-detailed-image {
width: 100%;
height: 768px;
}
#media only screen and (max-width: 600px) {
.cpi-wall-detailed-image {
zoom:0.5
}
}
#media only screen and (max-width: 475px) {
.cpi-wall-detailed-image {
zoom:0.4
}
}
try this then :
.cpi-wall-detailed-image {
width: 100%;
height: 2316px;
}
#media only screen and (max-width: 600px) {
.cpi-wall-detailed-image {
zoom:0.37
}
}
#media only screen and (max-width: 475px) {
.cpi-wall-detailed-image {
zoom:0.325
}
}
How to handle Banner image responsive for different devices like small and medium mobile and tablet.?
Width:
.banner
{
max-width: 100%;
height: auto;
}
Media Query:
#media only screen and (min-width: 960px) {
.banner
{
width: 960px
height: auto;
}
#media only screen and (min-width: 1440px) {
.banner
{
width: 1440px
height: auto;
}
}
#media only screen and (min-width: 2000px) {
.banner
{
width: 2000px
height: auto;
}
}
#media only screen and (max-device-width: 480px) {
.banner
{
width: 480px
height: auto;
}
}
#media only screen and (device-width: 768px) {
.banner
{
width: 768px
height: auto;
}
}
You can use bootstrap framework. add img-responsive class to image
<img src="1.jpg" class="img-responsive" alt="image" >
It also depeds on your image, does the main content of your image occupies all the space?, is there anything you can cut? if that's the case, you can achieve it with object-fit, object-position, and the width and height will not vary too much.
If you can modify by yourself the image, use the img srcset property, where you designate which image should be displayed in different resolution breakpoints.
If none of previous options suits you, try with vmax, you'll have fun guessing the right measures, but once that it's done, you won't need too much media queries
Finally, there's the tedious way, setting various media queries.
I just got this theme and tried to import background image like the recommended size in the documentation but It seems something is odd
and these images have CSS problems in theme style.css
here is the link of my website
http://test.doublelift.kr
and here is the demonstration of the actual template
http://www.cssvillain.com/hungry/
the problem is abovious if you resize the window and see the image file shrink slowly instead of changing width based on px.
The image width is based on percentage on the template I've got, so I tried to make it to auto and write the style based on the height just like the original template
but It seems It is reading the style from somewhere else
no success on chrome's developer tool
I appreciate your help
#single-page-header {
height: 1000px !important;
overflow-y: visible !important;
}
.cycle-slideshow {
position: relative !important;
}
#single-pager-header .cycle-slideshow img {
display: block !important;
max-height: 1000px !important;
width: auto !important;
}
#media screen and (max-width: 1370px) and (min-width: 1025px) {
#single-page-header {
height: 720px !important;
}
#single-page-header .cycle-slideshow img {
max-height: 720px !important;
}
}
#media screen and (max-width: 1024px) {
.single-page-header-content {
overflow: hidden !important;
}
.single-page-header-content .cycle-slide-show {
overflow: hidden !important;
}
}
#media screen and (max-width: 1024px) and (min-width: 768px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
#media screen and (max-width: 767px) {
#single-page-header {
height: 500px !important;
overflow: hidden !important;
}
}
#media screen and (min-width: 1025px) {
#single-page-header .cycle-slideshow img {
max-height: 1000px;
}
}
You may change the revolution slider setting for specific screen sizes options over there and then change the css according to your requirements.
This is the best way to handle i see.
I have the following code inside a media query (from Bootstrap):
#media (min-width: 768px) {
.col-sm-9 {
float: left;
width: 75%;
}
}
When resizing the window between 768px and 992px, the width of my column is always 562.5px. The width of wrapping div with the row class is always 750px. Why is that? I always thought that specifying width in percent meant that the width of our element will always be 75%. For example, when window is 992px wide it would be 744px wide and when window is 768px wide it would be 576px wide.
Am I missing something?
That is because bootstrap's own rule set the container to a fixed width, which also is not the same as its min-width rule value.
/* bootstrap rules */
#media (min-width: 768px) {
.container {
width: 750px; /* 75% of 750px = 562.5px */
}
}
#media (min-width: 992px) {
.container {
width: 970px; /* 75% of 970px = 727.5px */
}
}
If you want it to change while resizing the viewport, you could like this
Fiddle demo
#media (min-width: 768px) {
.col-sm-9 {
width: 75%;
}
.container {
width: 100%;
}
}
#media (min-width: 992px) {
.container {
width: 100%;
}
}
Or, if you want it to be fluid all the time, simply change the container class to container-fluid
Fiddle demo
I have this code . When i resize the browser to min-width: 480px it doesn't change the background color to blue and width to 100px
this is my code so far:
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
.boxcontainer{
width: 1300px;
background-color: green;
height: 200px;
}
<div class="boxcontainer">
</div>
Thank you
Switch the order of the CSS rule, Change your CSS into
.boxcontainer {
width: 1300px;
background-color: green;
height: 200px;
}
#media screen and (min-width: 480px) {
.boxcontainer {
background-color: blue;
width: 100px;
}
}
As in this JSFiddle example. the background is blue as long as the width is not less than 480px, otherwise it turns green.
IF by any chance you meant to do the opposite, because .boxcontainer{width:1300px} makes me think you want that , then just change the media query break point to #media screen and (max-width: 480px) instead of #media screen and (min-width: 480px).
You can see the second option in this JSFiddle