I am using bootstrap for my images. It displays the smaller image in the browser as I am using visible-xs with img-responsive.
However when I am trying to load the bigger image using media query, the screen is just blank.
I have checked the location of the image and it is there.
Could someone please point me in the right direction as to why bigger image is not being displayed with media query?
<div class="container">
<div id="my_img"><img id="pic" src="images/flower.jpg" class="img-responsive visible-xs"></div>
</div>
and in the CSS file
#media (min-width: 1200px) {
#pic{
background:url('images/flower-1200.jpg') no-repeat;
}
}
if you are using the visible-xs class then according to Bootstrap Docs, it only going to appear in extra-small screens, hiding in the rest of the screens.
If you are trying to load a new image (using the background) then you have to apply to the parent #my_img since it doesn't have the visible-xs class.
#media (min-width: 1200px) {
#my_img {
background: url('//lorempixel.com/1600/900') no-repeat;
height:900px;
max-width:100%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12">
<div id="my_img">
<img id="pic" src="//dummyimage.com/100x100" class="img-responsive visible-xs">
</div>
</div>
</div>
</div>
As dippas mentioned, your #pic image will not be visible at 1200px because of the visible-xs class so you would need to set the background image of your #my_img instead. Be sure to provide the appropriate dimensions in your CSS of the image in question.
I would say that your .css files are most likely in a css folder.
If that is the case, you need to use the relative location of the image based off the location of your .css file. most likely this:
background:url('../images/flower-1200.jpg') no-repeat;
Related
Regarding Bootstrap 4:
i was trying to collapse .card div on mobile view only.
i tried .collapse class but in this way it collapses on all sizes of screen. here are my codes in case if somebody wants to see;
<div class="col-lg-3">
<div class="card>
<div class="card-header">
<a data-toggle="collapse" data-target="#t10"><h3>Top 10</h3></a>
</div>
<div class="card-body collapse" id="t10">
<div class="row ">
<div class="col-md-12>
<h4>ABC</h4>
<h5>Review: <img src="../../images/4stars.png"><br></h5>
</div>
</div>
</div>
</div>
after spending hours searching on internet, i didn't find anything probably i was using wrong search terms (as newbie), I got an idea to reverse the situation so I un-collapsed for =>992px in media query, codes as following:
#media (min-width: 992px) {
#t10.collapse { display: block; }
}
As you can see it is OK but I really want to learn the best way to collapse a div/card when screen size changes to less than 992px.
(Pardon my English. I am not Eng speaker).
Just add .dont-collapse-sm class to Your collapsible div to not disappear over 768px breakpoint.
Credits for: https://codepen.io/glebkema/pen/xryaKK (also helped me a lot!)
#media (min-width: 768px) {
.collapse.dont-collapse-sm {
display: block;
height: auto !important;
visibility: visible;
}
}
Use the responsive display classes.
For example,
<div class="card-body d-none d-lg-flex" id="t10"></div>
Will hide this DIV on screen widths less that 992px.
Bootstrap 4 providing classes for responsive screen. like col-lg-* col-sm-*
So, You can try changing the display by using the bootstrap class itself.
E.g.
<div class="d-block d-sm-block d-md-flex d-lg-flex d-xl-flex">
/** your content **/
</div>
This classes will change the display property for every screens which we mentioned.
For your reference, Check the Bootstrap 4 Docs: Here
I'm using an iPhone CSS device from https://marvelapp.github.io/devices.css/
However, I can't find an intelligent way to make it resize to fit within mobile devices. The only way I've found is by changing the meta viewport's initial scale, but that changes how the entire Bootstrap website appears on mobile, not just the mobile device obviously.
Is there a way to perhaps change the scale for the specific div within which the CSS mockup resides, or another way to make the device resize for mobile view?
A transform: scale() seems to work.
The scale could be set using JS based on the viewport width to make it fit the screen.
.small {
transform: scale(0.5);
}
<link href="//marvelapp.github.io/devices.css/assets/devices.min.css" rel="stylesheet"/>
<div class="marvel-device iphone6 silver">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
<div class="marvel-device iphone6 silver small">
<div class="top-bar"></div>
<div class="sleep"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<div class="screen">
<!-- Content goes here -->
</div>
<div class="home"></div>
<div class="bottom-bar"></div>
</div>
You must to do it manually using "medias" to determine how it should look in certain devices. Media Queries are useful to make breakpoints on viewport sizes to adjust content and view it properly on different screen resolutions.
The following example shows how a media query changes some existing values de .marvel-device.iphone6 and .marvel-device.iphone6 .sensor at a resolution of 320px wide.
#media only screen and (max-width : 320px) {
.marvel-device.iphone6{
width: 320px; /*Or the new width you want in pixels*/
height: 480px; /*Or the new height you want in pixels*/
}
.marvel-device.iphone6 .sensor{
left: 50px; /*Or the left position for the sensor*/
}
}
As I said before, I don't know an other better way to do it but manually, so you need to copy that code, and modify these values to fit the screen resolutions you want. Unless you could use transform for the whole .marvel-device
with Bosstrap3/.
I have 2 image. One image is big. another is small.
both of image are responsive.
I want put small image on big image.
It's easy for a static page. But I want do it for a responsive page.
I want position of images not be change with resize of page.
I try this:
<div class="container">
<div class=" panel panel-default">
<div class="panel-body" style="padding:1px">
<img class="img-responsive" src="http://placehold.it/1170x300" alt="Chania">
</div>
<div class="panel-footer">
View all <h4>Bootply Editor & Code Library</h4>
</div>
</div>
</div>
<img class="img-responsive mytumb" src="http://placehold.it/150x150/000">
AND css code:
.mytumb{
position:absolute;
top:50px;
left:40px;
}
But it works for an static page.
How can I do it?
https://jsfiddle.net/DTcHh/18935/
You can go here for a solution position one image above another , you will surely get a solution. Happy Coding!
You can add your image inside your .container div so it is in absolute position relative to this container.
Like this
And then, play with media queries to make it fits everytime.
.container { position: relative; }
#media (max-width: 767px){
.img-responsive.mytumb { width: 20%}
}
It is not perfect but you've got the idea I suppose.
I've the following markup for a page which is mobile ready:
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
The problem is, since I provided width:100% for the imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a min-height:300px without adding the image as a background and make it as cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.
There's no other better way around this:
img{/*but target to specific selector that you need*/
min-height: 300px;
max-width: 100%;
}
This produce the responsive result but when minimum height fits the requirement then this starts stretching.
One better solution is to use image as background and using css like this produce better experience with responsive image:
.cover-section{/*remove img inside this selector to use it as background*/
background: url(image-path.jpg) no-repeat center;
background-size: cover;/*don't forget to use vendor prefixes*/
min-height: 300px;
max-width: 100%;
}
You could always use media queries to handle CSS for mobile devices. Something like follows : (I've moved your img styling to a class 'cover')
.cover {
width:100%;
}
#media screen and (max-width: 500px) {
.cover {
min-height: 300px;
}
}
</style>
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
Not sure if this is what you want.
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.