I have a series of images laid across horizontally in a div.
The goal is that as the browser gets smaller, so do the images, so they are all visible and stay inline.
Currently, only the first image will stay visible, while the other images go out of view. (Although all of the images to get smaller.
Here is the JSFiddle: http://jsfiddle.net/KXGUM/
You will notice that one you make your browser smaller, the images will get smaller but only the first one will stay in view, the others you have to scroll right to see.
I want all of them to still be visible, meaning they all have to shrink together.
CSS:
body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: auto; white-space: nowrap; max-width: 100%; width: auto; }
img {max-width: 100%; height: auto; display: inline-block; width: auto;}
Since you got 3 images their width should be 33% of the parent container.
Change your 100% in 33% and they're all on the screen and in one line.
img {max-width: 33%; height: auto; display: inline-block; width: auto;}
See here: http://jsfiddle.net/KXGUM/1/
Related
I have a fixed height on all my images and need to keep the image in proportion as the screen width gets smaller.
#owl-demo .item img {
display: block;
width: auto;
height: 300px
}
This works fine until I need to put a margin in between the images.
#owl-demo .item {
margin:0 10px 0 10px;
}
The margin won't show and the images are side by side still. The margin will show if I put width: 100%
#owl-demo .item img {
display: block;
width: 100%;
height: 300px
}
But then the image is no longer in proportion.
I tried with Owl's own demo and this is the case. If you inspect one of the images and change it to the code at the top with width: auto you will see the margin no longer works. You will need to remove the max-width: 100% from the img tag from bootstrap also.
http://owlgraphic.com/owlcarousel/demos/images.html
Looks like you're using version 1.3.X
Try upgrading to version 2 and you'll be fine.
I have been searching and trying all kinds of different stuff to make it work, but I did not succeed.
this is a link that may help to understand: http://bflydesign.no-ip.org:9876
Here is my issue: I have a centered div (width 75% and max of 1020px) that contains 3 div's: 30px - adaptive width - 30px.
The two smaller div's of 30px only contain a background (white stripes). When resizing I want the center-div to adapt but not the two outer div's. What is happening now is that the width of the outer div's is given to the center div. How can I keep the fixed width on the outer div's?
in this fiddle it seems no problem: http://jsfiddle.net/bflydesign/N3LZ9/
.left, .right {
min-height: 700px;
width: 30px;
min-width: 30px;
background-color: yellow;
}
To make just the 2 image div elements have a fixed width when you resize, you have to add the following to your .center class:
.center {
max-width: 960px;
margin: 0px auto;
overflow: hidden; /* <- add this */
}
You can do the following if you want to make it responsive:
(all three div elements will be properly resized.)
.center {
max-width: 960px;
margin: 0px auto;
width: 94%;
}
.left, .right {
height: 1000px;
min-width: 30px;
background-image: url('cubes_bg.png');
width: 2.94%;
}
The problem here was that your contents didn't fit into your parent div so your images were behind the center div.
So if you specify your width elements correctly calculated so the total width in your parent div is 100%, there is no problem.
I got a div #header width: 1000px;
#header {
width: 1000px;
margin: auto;
height: 164px;
}
A div #main-container in full-width
#main-container {
height: 278px;
background: url(images/mainbg.png);
width: 100%;
}
But when I resize my window to a size less than 1000px setted on header, the #main-container creates a empty space.
http://tinypic.com/view.php?pic=1zcmmpf&s=5
I want to remove this space, and let the #main-container have full-width
What you are seeing is correct CSS behavior.
For example, consider your HMTL snippet:
<div id="header"></div>
<div id="main-container"></div>
with the following CSS:
body {
margin: 0;
}
#header {
width: 1000px;
margin: auto;
height: 164px;
background-color: yellow;
}
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
}
See demo at: http://jsfiddle.net/audetwebdesign/5xwRu/
For pages wider than 1000px, your header is centered as you expect.
Your background image fills up width of the page because the #main-container has 100% width.
As you reduce the page width to less than 1000px, you will see a horizontal scrolling bar appear because the fixed width header is too wide to fit in the view port, which triggers
an overflow condition.
In this situation, the CSS engine creates some white space the right of #main-container since #main-container has a computed width less than 1000px and it fills up the view port width (which is less than 1000px), which does not include the space created for the overflowing content.
You can fix this a number of ways, but it depends in part on what you want to do.
You could set a minimum width as follows:
#main-container {
height: 278px;
background: pink url('http://placekitten.com/2000/278') top center no-repeat;
width: 100%;
min-width: 1000px;
}
See example 2 in the demo fiddle.
Note: You may have a wrapper container to which the CSS property overflow: hidden is applied. If this is the case you may not see a horizontal scrolling bar.
Website in question: http://www.flowersbe.com
So I am not having an issue getting the footer to stick to the bottom, my issue is that I have a top margin on my container that pushes the footer down 25px past the bottom of the browser, which is most evident on the contact page of the above site. I want to keep the 25px space at the top but I still want the footer to be fully visible...below is my css for the container and the footer...any ideas on how I can resolve this issue?
html,
body {
height: 100%;
}
#container {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 25px auto -50px;
background-color: #fff;
}
footer {
clear: both;
width: 960px;
height: 35px;
margin: 0 auto;
padding: 15px 0 0 0;
background-color: #ffebeb;
text-align: center;
}
.push {
height: 50px;
}
I believe that to achieve exactly what you want to do, you would have to introduce some JavaScript to calculate the exact height that #container should be.
It is translating the height of 100% to the exact height of the viewport, then adding the 25px margin on top of that. The only way I can think of to get around that is to use JavaScript to get the height of the viewport and set the height of #container to that value minus 25px.
Possible alternate solutions that don't involve JS:
Just drop the min-height and allow #container to be only as tall as it needs to be.
Use position: fixed on the footer to ensure that the footer is always at the bottom of the viewport, but note that it would sit on top of any content long enough to go beyond the height of the viewport.
Does that give you enough to go on?
I have centred everything on the website fine, its just when I resize the window too small so the div is bigger than the window, the div is stuck to the left of the screen, but I want the div to always be centred. If you don't get what I mean you can view the website here.
The 'div' I'm mainly talking about is the blue 'stroke' just above the footer.
I'm viewing this in Google Chrome
A fixed width with absolute positioning will do it.
.page {
text-align: center;
margin: 75px 0 auto;
width: 1000px;
position: absolute;
margin-left: -500px;
left: 50%;
overflow: hidden;
}
Site.css line 10