Hello
I've been keeping track of this forum as it deals with an issue I have with reactive web design and the cycle plugin. I've done everything mentioned here and now the images are finally fluid... however I seem to have a problem with the container as now it has a height of 0 at all times unless there is something to fill up the page on which it was posted then it just floats over that content also the images seem to overflow out of the container. Any way to fix this and keep it dynamic?
I don't want to set a fixed height for the container as it is supposed to be presented on mobile devices. Here is the code:
CSS:
- #jse31{
- margin: auto;
- }
- .cycleslide {
- width: 100% !important;
- }
- .cycleslide img {
width: auto;
max-width: 100%;
height: auto; - }
JS:
- var $JSE = jQuery.noConflict();
$JSE(document).ready(function() {
$MRPJSE(#jse31).cycle(
{
slideResize: false,
containerResize: false
}
);
});
HTML:
- <div id="jse31">
- <div class="cycleslide">
- <img src="pics/big/at1.jpg" border="none" />
- </div>
- <div class="cycleslide">
- <img src="pics/big/at2.jpg" border="none" />
- </div>
- <div class="cycleslide">
- <img src="pics/big/at3.jpg" border="none" />
- </div>
- </div>
Now if there is some text on the page enough to fill a whole page then container jse31 will float over the text obstructing it, if there is no text and the div is inside an empty rwd element then the pictures will look like they are being cut off at the bottom and only like 10px height of the images will be shown, the width however will shrink and expand fluidly without any problems resizing the rwd element.
Edit: Nevermind found it I forgot to enter the placeholder image, but I wonder why does it make a difference? Is it because that image isn't processed and therefore sets the attributes for the container?