Banner size problem

Question

I have a problem with banners so far and it is making me pull my hair out and I am hoping i will get the solution here. When I put more than 1 banner module on a page (let's say 3 banners), it seems all 3 show with the same size (witdth) even if all three have different sizes on the module options. What might be the problem here? example:

this is the code of the banner:

<div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;"><ul id="mycarousel1714" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 486px;">

    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">
                                            <img src="/images/ibertex.jpg" alt="Info 1" width="1150" height="60">

                        </li>
        <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none; width: 243px;">
                                            <img src="/images/voip-10.JPG" alt="info 2" width="1150" height="60">

                        </li>
    </ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="disabled"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div></div></div>

Edit:

I am by the way using caroussel banners, and this is the css file:

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}
.jcarousel-container li{
    margin-left:0;
}
.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 454px;
    height:auto;
    overflow: hidden;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}
.jcarousel-item a {
    padding: 0!important;
}
.jcarousel-item a:hover
{background: none!important;
}

The width is set to width: 454px; but the default that showed earlier was :

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">

If i change the width on that css file, will it work?

Answer 1

The Carousel Banner module requires fixed widths in order to work properly, as the comment in the CSS file explains:

.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 454px;
    height:auto;
    overflow: hidden;
}

The width: 454px; value is the default value, but this can be overridden for each module in the module settings, and will be added as inline style:

This value is probably set to 243 in all your modules, so to solve this you have to modify each module with a value that works with your template layout.

Unfortunately, this will cause problems with your template on small screens if you're using responsive design, unless you find a way around (hide the banners on small screens or change the width using jQuery).

Answer 2

Most likely it's going to be a template style. I assume you are using the core banners module/compenent rather than a third party one?

Use an elements inspector (F12 in Chrome, or Firebug is good in Firefox) and select the image to see what styles are being applied, and what file they are coming from - I assume there is a max-width or a width set somewhere that is overriding the value you set.

Answer 3

This problem seems to be caused by jcarousel plugin.

Your .jcarousel-item has a inline css property setting width to 243px, check the size of container.

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">

Your pasted code only contains divs, a example with images will be helpful.

You can try setting .jcarousel-item img {width: auto;} but is difficult to find the problem without a live demo.

Update for div size:

If you are using standard mod_banners module I must see the file default.php located at modules/mod_banners/tmpl/ directory. Seems you are using a tweaked version to use jcarousel, in standard template around the line 23:

<?php if ($item->type == 1) :?>
<?php // Text based banners ?>

Insert this:

<div style="width:<?php echo $item->params->get('width'); ?>px !important;height:<?php echo $item->params->get('height');?>px !important;">

Before

<?php echo str_replace(array('{CLICKURL}', '{NAME}'), array($link, $item->name), $item->custombannercode);?>

then

</div>