I understand there's a gazillion questions on this issue but none of the solutions on any of them seem to work for me. This is what my markup looks like:
<div class="immersion-div">
<div class="immersion-div-image"></div>
</div>
As you see, it's a fairly straightforward setup with one div containing another. The parent div is styled to adapt its height to the device screen resolution using media queries. Here's how the two divs are styled:
Parent div:
#media (min-width: 2000px) { .immersion-div { height: 1307px; } }
#media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
#media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
#media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
#media (max-width: 299px) { .immersion-div { height: 136px; } }
Child div (with the image background):
.immersion-div-image {
background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
The image serving as the background is 2880px by 900px (although that should be inconsequential in this scenario) and the resolution of the screen on which I tested this is 1366px wide. Per the defined media queries, the height of parent div should evaluate to 500px since the screen falls in the 750px-1400px category. However, on Internet Explorer, the div seems to render with a height of 1000px! This issue is only affecting IE whereas all other browsers are rendering the divs fine. What could be the problem? Before anyone suggests using background-size: contain, I must admit I tried it and it messes up the aspect ratio leaving a blank band at the bottom of the div which is why I don't want to go that route. Besides, I want to understand why cover wouldn't work on IE when it does just fine on all other browsers.
Just in case it helps, the site in question is peppyburro.com and the affected divs are on the last green image on the home page.
Related
know if there is any css property to resize the elements of a web page according to the height/width of it? i tried with the nowrap property and setting the height to 90vh but i failed
height: 90vh;
white-space: nowrap;
that is, if I resize the browser window, all the elements are still displayed but reduced
You can do this using media queries
e.g.:
#media screen and (max-width: 500px) { ... } to style elements when the width of the browser or device is below 500px
#media screen and (min-width: 500px) { ... } to style elements when the screen is at least 500px or bigger
You can also use min/max height. Read more about media queries here: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
div {
width:300px;
height:300px}
#media screen and (max-width: 500px) {
div {
background-color: blue
}
}
#media screen and (min-width: 500px) {
div {
background-color: red
}
}
Make your browser window smaller to see the div change color
<div></div>
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
I have a survey page, where the body has background-color: #A71930, and a container with background-color: white, which holds the <form>, like this on a desktop:
I have added these #media queries for mobile devices:
#media all and (max-width: 600px) {
#survey-container {
width: 100%;
}
}
#media all and (max-height: 600px) {
#survey-container {
height: 100%;
}
}
These queries make the page look like this on a phone screen:
This is good for now, but my issue is when you scroll to the bottom, then start going back up, this happens here:
As you can see, when you scroll up, part of the container is cut off at the bottom, still leaving the <form> content. You can see for yourself here. So, what is causing this problem, and how can it be fixed? My full code can be viewed below(the issue does not seem to occur in codepen, so only try the issue in a mobile browser):
https://codepen.io/jerryd2304/pen/qvERZL
I was able to replicate this in Mac/Safari (12.0.3), but not Chrome or Firefox.
Fix 1:
Remove the height: 100% altogether.
Fix 2:
Change height to min-height:
#media all and (max-height: 600px) {
#survey-container {
min-height: 100%;
}
}
Either way, the problem is resolved:
I have an image that is about 400px by 300px in size.
I have resized it using css like so:
img {
display: block;
max-width: 50px;
max-height: 50px;
}
But when it displays it flickers constantly.
This only happens in Firefox. Chrome, IE and Safari all display fine. Why is this?
First of all its a bad idea to resize the image. When you need a 50x50 image why have a 400x300 image. You waste the users band-with by letting him download a 30Kb file when he can do it with 4Kb.
However, what you want is to scale the image.
CSS3 has new property called ri .
try this
img.ri { max-width: 90%; }
You can use media queries along with this.
#media screen and (orientation: portrait) {
img.ri { max-width: 90% }
}
#media screen and (orientation: landscape) {
img.ri { max-height: 90% }
}
Now you don't want to loose your aspect ratio, so try the css property
resize: none|both|horizontal|vertical|initial|inherit; /* any one of the options IE not supported*/
Look into this : http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design if you want to responsively scale images.