When I change the width of the browser window images doesn't scale on IE 11 or below. I does work with Google Chrome. I tried to add position: absolute, but it destroying whole layout.
Image css:
.auction-item-img-container {
display: block;
height: 400px;
overflow: hidden;
position: relative;
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
#media screen and (max-width: 1024px ) {
.auction-item-img-container {
height: 0;
padding-bottom: 100%;
}
}
#media screen and (max-width: 480px ) {
.auction-item-img-container {
height: 270px;
}
}
Parent and img both have display: block; box-sizing: border-box;
HTML:
<article onclick="AddCookieWithAuction(1185)" id="auction-1185">
<a class="auction-item-img-container" href="/Aukcje/PodgladAukcji/1185/1/1" style="background-image: url(/Content/images/backgrounds/empty.png)"> </a>
<!-- This part is responsive -->
<div class="auction-item-desc">
<div class="auction-bar">
<h4 class="auction-bar-author">1</h4>
<h5 class="auction-bar-title">1</h5>
</div>
<div class="auction-price-container">
<div class="actual-price-holder">
<span class="auction-price-label">Cena</span>
<p class="auction-price">123 PLN</p>
</div>
<div class="auction-observe">
<a onclick="acc.onObservedButtonClick(1185, this)" class="fa fa-star-o observe-icon"></a>
<a onclick="acc.onObservedButtonClick(1185, this)" class="add-observe">Dodaj do obserwowanych</a>
</div>
</div>
<div class="auction-type-container">
<span class="auction-type">Aukcja w trakcie</span>
</div>
</div>
</article>
There is how it looks on both browsers.
IMAGE
I suggest you to see your layout here and all mobile devices, Your website is working properly in all devices. There is no meaning to watch your layout in internet explorer with resizing the screen.
Might be a little late to the party, but I found this other SO answer that might help you: https://stackoverflow.com/a/42174237/1914261
IE11 seems to have some trouble with the initial value of the flex-shrink property. If you set it to zero (it is initially set to 1), it should work
Related
In my jquery Mobile app, I've got a page that has a header and footer and the main content is 4 images arranged 2x2. I chose to create my own 2x2 grid in a div since I couldn't get JM grid to work. The code for the main content looks like this:
<div class="container">
<div class="image">
<a href="#intro">
<img src="img/Intro1.png" />
</a>
</div>
<div class="image">
<a href="#putting">
<img src="img/Putting1.png" />
</a>
</div>
<div class="image">
<a href="#chipping">
<img src="img/Chipping1.png" />
</a>
</div>
<div class="image">
<a href="#sand">
<img src="img/SandPlay1.png" />
</a>
</div>
</div>
The page css that arranges everything looks like this:
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.container .image {
width: 50%;
}
.container img {
width: calc(100% - (5px * 2));
margin: 5px;
}
This works fine on an iPhone, but the images are too large on an iPad. On the iPad the images are the full width which makes them go beyond the bottom edge of the screen. I've looked all over for a solution to this and finally decided to come here. Thanks in advance for any help/guidance.
What you'll want to use is media queries. For the issue with the ipad you can set the media queries so that if your page is being viewed on a tablet/ipad size you can specify the size of the images and anything else. Take a look at this example:
.sample {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #ffffff ;
font-size: 7rem;
position: absolute;
top: 17%;
width: 100%;
}
#media screen and (max-width: 900px){
.sample {
font-size: 3.5rem;
margin: auto;
width: 50%;
padding-bottom: 100px;
}
}
In the above you can see the class of sample (both outside and inside the media query) has different css styles based on the screen size.
Take a look at this for further info: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
this is how it looks on desktop
I have an image that has the full width of the screen width: 100%;
Specifically this image is a map, in the whole center of the map there is a "path", with the points that when clicking, some manners appear,
The problem is that I don't know how to make that huge sensitive map so that it can be seen well on different devices, what I was thinking is what an overflow is but I really don't know how to do it so only the left part of the image is shown
This is the code:
.map-container {
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: $blue;
}
.img-map {
width: 100%;
}
<div class="container-fluid">
<div class="row">
<div class="map-container">
<img class="img-map" src="public/images/mapa.svg">
<div id="step1" class="point argentina"></div>
<div id="step2" class="point brasil"></div>
<div id="step3" class="point venezuela"></div>
<div id="step4" class="point colombia"></div>
<div id="step5" class="point panama"></div>
<div id="step6" class="point mexico"></div>
<div class="mod-paso-1">
<div class="mod-info">
<p><b>XXXXXXXXXX</b></p>
<p><b>XXXXXXXXX</b></p>
<p><b>XXXXXXXX</b></p>
<P>XXXXX</P>
</div>
</div>
</div>
</div>
</div>
You who recommend me to make this map responsive?
"-Cut the image for each resolution?"
If you need more details, I am attentive
Thanks in advance.
Add 100% width to your map container so the image width can take 100% of the screen whether on desktop or mobile:
.map-container {
width: 100%;
padding: 3.2rem .8rem;
position: relative;
display: inline-block;
margin: 0 auto;
background-color: blue;
}
May be this would help you
.img-map {
width: 100%;
height: 100%;
object-fit: contain;
}
I've also tried to fiddle around a bit with this issue.
you will have to open on mobile view because I only focused on that for now.
Here is the codepen
https://codepen.io/Spoochy/pen/LYYQzPv
I combined object-fit:cover and viewport heights
However, object-fit is quite new (as far as I know) and might not be fully compatible for all browsers. so I would suggest to always check the Can I use Tables before using unknown properties.
https://caniuse.com/#search=object-fit
I have a similar issue to one of my previous questions.
when i reduce to below 975px my picture should change to a differet jpg
it seems to work locally when i redue the size of the screen but when i check on online the new image doesnt show.
As this happened previously i played with it for several hours first for fear of looking stupid, but i give up now, ill take it on the chin if any one can assist:)
HTML:
<!-- load this image on big screen -->
<div class=" jumbotron jumbotron-fluid jumbotronbrejos hideformob">
<div class="container-fluid relspan">
<img class="brejosimg" src="resources\images\brejosHouse.jpg">
<div class="jumbospan">
<h4 id="fontI">Albufeira, Algarve Portugal</h4>
</div>
</div>
</div>
<!-- load this image on smaller screens -->
<div class="container-fluid navpad">
<div class="row">
<div class="farmhouseimg farmhouse"></div>
</div>
</div> <!-- end of container -->
CSS:
/* on screens that are less than 975px */
.farmhouseimg {
background-image: url("../images/farmhouse.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
margin-left:0px;
margin-right: 0px;
width:100%;
display: none;
min-height: 600px;
}
.farmhouse {
margin-bottom: 30px;
min-height: 600px;
width:100%
}
#media only screen and (max-width: 975px) {
.farmhouseimg {
display: block;
}
}
.hideformob {
display: block;
}
#media only screen and (max-width: 975px) {
.hideformob {
display: none;
}
}
I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="bg"></div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
Following is the css for class bg :
.bg {
background-image: url('../images/2.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:690px;
}
Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.
Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?
Try using viewport-height in CSS3:
.bg {
height:100vh;
}
do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.
<div class="img-responsive" style="width: 300px;height: 300px;">
<img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
</div>
if you want text over picture, you can do this:
#media (max-width: 480px) {
.bg {
position: absolute;
left: 0;
width: 100%;
}
}
if you want half top is picture, half bottom is text, you can do this:
html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="wrap">
<div class="bg"></div>
</div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
css
#media (max-width: 480px) {
.wrap {
position: relative;
padding-bottom: 50%;
}
.bg {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
}
hope it can help
I'm making a website for my course in webdesign and one criteria is for it to be responsive (resize content to fit screen size).
So in my site as it is every image and text paragraph size according to screen sizes from full HD to iPhone size.. except for my header image which just stays locked in its place when I scale it down, so when it's down to mobile resolution I have to scroll to the right to see my image.
Here's my HTML and CSS codes for the header image:
HTML:
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="images/logo2.png"></p>
</a>
</div>
</div>
CSS:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
Link to my code with a random same size images.. http://jsfiddle.net/hac4cfrn/
If you want it to be responsive and centered, you should set the .container_14 with to 100%, not hardcode it in pixels:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 100%;
}
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"></p>
</a>
</div>
</div>
If you want the .container_14 to adapt to various screens but stay at 1200px width if there’s enough space, then use a #media query:
.container_14 {
margin-left: auto;
margin-right: auto;
width: 1200px;
}
#media screen and (max-width:1200px){
.container_14 {
width: 100%;
}
}
.container_14 .grid_12 {
width:97.5%;
height:90px;
}
img {
max-width: 100%;
}
<header>
<div class="container_14">
<div class="grid_12">
<a href="index.html">
<p align="center"><img src="http://www.tscross.com/sitemap_files/sitemap_banner.png"> </p>
</a>
</div>
</div>
</header>
You can also add a second #media query for the image inside. It’s also possible without the container.
Otherwise you could just use 100% as a width.