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;}
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.
I have 4 images and i want them to be displayed in one row at 1200px
then 992px and lower i want 2 pictures displayed in one and other 2 should go in next row and at 768px and lower i want one picture in one row.
Problem occours when browser is at less than 992px chrome just loads 768px rules.
HTML
<section class="gallery">
<div class="container">
<img src="img/g1.png" alt="">
<img src="img/g2.png" alt="">
<img src="img/g3.png" alt="">
<img src="img/g4.png" alt="">
</div>
</section>
CSS
#media (min-width: 768px) {
.gallery img {
width: 51%;
}
}
#media (min-width: 992px) {
.gallery img {
width: 49%;
}
}
#media screen and (min-width: 1200px) {
.gallery img {
width: 24%;
}
}
Problem occours when browser is at less than 992px chrome just loads 768px rules.
Sure, because the 768 rule contains min-width: 768px, the 992px rule contains min-width: 992px
So on a 900px wide screen min-width: 768px rules will apply, since it's less than min-width: 992px
I suppose you should use max-width instead.
I find it easiest to start from the smallest screen size and work my way up (that's the way that Bootstrap does it). So, your smallest screen size doesn't need a media query since it's what will be set by default.
.gallery img {
width: 51%;
}
Then, you can put your next rule in the min-width:768px rule. Once the screen hits 768px, switch to two images per row
#media (min-width: 768px) {
.gallery img {
width: 49%;
}
}
Finally, move your last rule to the min-width:992px rule. Once the screen hits 992px, switch to all four images in one row
#media (min-width: 992px) {
.gallery img {
width: 49%;
}
}
So, all together
.gallery img {
width: 51%;
}
#media (min-width: 768px) {
.gallery img {
width: 49%;
}
}
#media (min-width: 992px) {
.gallery img {
width: 24%;
}
}
Check out this codepen for a demo: https://codepen.io/noahjwhitmore/pen/MrBdMY
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>
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