Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Max-Width property on variable width slider

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #197345
    andygibson1982
    Participant

    Hi everyone

    First time poster, be gentle!

    I’m new to web design and CSS so i’m hoping I can explain my issue well enough, so here goes.

    I’ve recently created a website in WordPress (first time for this too) and whilst it seems to look ok on most browsers/screen sizes, i’ve got an issue with one part of a plugin i’m using on the front page.

    I’ve installed a slider which displays a selection of posts. The widget uses the posts featured image and overlays the post title underneath. You’ll see this about half way down my page at http://www.whatispolitics.co.uk

    The issue is, each featured image varies in size, and whilst the slider seems to cope with this (it’s limited to 300 pixels in heigh), what doesnt seem to be happenning is the caption doesnt seem to expand beyond 250 pixels wide. You can see the issue when you slide to a story with a wide featured image.

    Looking at the CSS it seems that max-width of 250px is being applied (inline)?? if i inspect this element and uncheck it then the caption fills the relevant width of its parent picture.

    My question is, do i have to modify my CSS to make this happen? how do i do that? do i have to modify the slider widget’s CSS? despite reading up on this i cant work out what i have to do. All i’ve gathered is that it’s something to do with the width of the pictures e.g. when it’s under 250px wide the caption looks fine, but anything over that and i just get a standard 250px block?

    Any ideas how to fix this little bug would be greatly appreciated!

    thanks

    #197347
    Paulie_D
    Member

    the slider isn’t actually sliding for me in Chrome but this looks like a javascript issue.

    There is inline styling on the captions

    <div class="ns-caption" style="max-width: 373px;">
    snip
    </div>
    

    which I’m guessing is being added by dynamically by the slider js based on the image size?

    I’d suggest checking the slider / plug-in documentation.

    In the interim, I’ll push this to the JS section.

    #197349
    andygibson1982
    Participant

    Hi

    Many thanks. I was wondering if it was the actual java script that was adding a the rule in. Cheers for moving the thread. I’ll see if there are any clues in the documentation.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.