I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?
.carousel{
width: 480px;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
Thanks!
You need to make the width of your .carousel class as 100%..
You need to make the below change to your CSS,
.carousel{
width: 100%;
margin: auto;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.
/* For devices which are smaller than 960 pixels */
#media only screen and (max-width: 959px) {
//Write your CSS here.
}
/* For Tablets */
#media only screen and (min-width: 768px) and (max-width: 959px) {
//Write your CSS here.
}
/* For all mobiles */
#media only screen and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Landscape Size to Tablet Portrait */
#media only screen and (min-width: 480px) and (max-width: 767px) {
//Write your CSS here.
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {
//Write your CSS here.
}
Hope this helps!
It's possible that a simple width:100%; on the css, and apply img-responsive to it may fix it.
Let me know!
Related
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.
How could one go about creating a div, that would have a default size of XX%, however, if the screen gets too small it would switch into 100% size? I have tried using min-width property but the problem with this is that it will not be responsive after the min-width is reached and will overflow if the screen is even smaller.
You have to use #media queries. So let's say you have a <div> that should take up only 50% of the web page and then you need to show it full width once it enters mobile phone, say 640px width:
div {
width: 50%;
}
#media screen and (max-width: 640px) {
div {
width: 100%;
}
}
you must use #media for that like this :
#media screen and (min-width: 769px) {
/* STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* STYLES HERE */
}
#media only screen and (max-device-width: 480px) {
/* STYLES HERE */
}
You can do it with #media queries, e.g.:
div {
width: 50%;
height: 100px;
border: 1px solid;
}
#media (max-width: 568px) { /* adjust to your needs */
div {width: 100%}
}
<div></div>
Currently I manage the CSS code differently based on screen size using and it works fine:
#media only screen and (max-width: 40em) {
my code
}
Now, what I'm trying to achieve is to have a piece of html code placed differently based on the screen resolution.
For instance my div id="news_box" would be placed in my header wrapper on desktop. Whereas on mobile phones, div id="news_box" would be placed in the footer wrapper.
How could I achieve that?
Many thanks,
As far as I know, there is no way to manipulate the DOM using CSS in that way, but you could use a JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
Or maybe assign a class to it and have the element appear in both the header and footer (although, you would want to change the ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
#media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}
With this you go through the diffrent resolutions. You have to change the values for your "news_box" for every different one.
e.g. For desktops you have a float:left box which will be not present in the css part for your mobiles.
example:
/* Tablets */
#media only screen and (min-width: 760px) {
#news_box { max-width: 760px }
…
}
/* midle screens */
#media only screen and (min-width: 980px) {
#news_box { max-width: 980px; float:left; margin: 0 auto; }
}
/* big screens */
#media only screen and (min-width: 1280px) {
#news_box { max-width: 1280px; float:left; margin: 0 auto; }
…
}
I am trying to make container fixed size 750px for all sized windows.
Here is HTML:
<div class="container">
<div class="thumbnail" >
..........<br/>
..........
</div>
</div>
and custom CSS:
#media (min-width: 1200px) {
.container {
width: 750px;
}
#media (min-width: 992px) {
.container {
width: 750px;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
But the problem is when I am resizing window from big to small at some point size of thumbnail is getting a little larger and then reverses to its initial size.
Here is a fiddle http://jsfiddle.net/Wy22s/718/ . You can just resize browser window or slide inner window in fiddle itself to left and then to right to reproduce this behavior.
I have tried to add another div with row class. Tried combinations with col-sm, col-md etc, but I can not manage to achieve desired behavior. How can I fix this so the container/thumbnail size stays the same?
you forgot to close the #media brackets.
#media (min-width: 1200px) {
.container {
width: 750px !important;
}
}
#media (min-width: 992px) {
.container {
width: 750px !important;
}
}
#media (min-width: 768px) {
.container {
width: 750px !important;
}
}
.container{ width: 750px !important;}
.thumbnail{ width: 750px !important;}
I am using media queries as below
#media (min-width:100px) and (max-width:639px)
{
}
#media (min-width:640px) and (max-width:960px)
{
.box {background-color:red;}
}
#media (width:768px)
{
.box {background-color:green; }
}
#media (min-width:961px)
{
}
I want to specifically target some div element for screen 768 pixel so that it appears exactly as i want for example in general i want to overwrite css defined in #media (min-width:640px) and (max-width:960px) by css which is targeted for screen 768 #media (min-width:768px)
At present it is still showing me box as red while it should be red, I am not sure how css is complied i defined it after the second media query so that it will over right it.
How can i target certain element using media queries for specific devices
example :http://jsfiddle.net/X43Et/
Update:
I am not sure what exactly was wrong with it put i copy pasted #media (width:768px) { part from fiddle & it works in my actual page.
May be some invisible typo mistake..
This is just an example of media queries You would want to have your normal css before the media queries
#gallery-1 img {
width:375px;
}
#media screen and (min-width: 1366px) {
#gallery-1 img {width:375px;}
}
#media screen and (min-width: 1440px) {
#gallery-1 img {width:428px;}
}
#media screen and (min-width: 1600px) {
#gallery-1 img {width:434px;}
}
#media screen and (min-width: 1920px) {
#gallery-1 img {width:540px;}
}
And when you're using media queries, you want to specify that you want the screen size so you use screen after #media. I hope this is what you were looking for and will help you!
Here is a small example script I made
<style>
#box {
width: 500px;
height: 200px;
background: yellow;
border: 1px solid #000;
}
#media screen and (max-width:1000px) {
#box { background: red; }
}
#media screen and (min-width:1000px) and (max-width:1200px) {
#box { background: green; }
}
#media screen and (min-width:1200px) and (max-width:1400px) {
#box { background: blue; }
}
</style>
<div id="box">
</div>
On JSFiddle the screen size isn't the whole screen, it's the small box the preview is in so you would need to make the sizes smaller to see the effect, here is a DEMO resize your screen browser to see the preview.