Overflow Issue with responsive slide show widget2015-10-02T17:06:56+00:00

Build with IDX Broker Forums IDX Broker Control Panel Custom CSS in Control Panel Overflow Issue with responsive slide show widget

  • Author
    Posts
  • Nancy Gernand
    Participant
    Post count: 1

    I am having some style issues with the slideshow widget.

    I was messing around with the css and could not find a solution.
    Please visit

    http://www.tealwaterrealty.com/

    I removed all of the css I was adding to the widget inline css, and restored defaults. I want to create a global rule in my child theme css to address all instances of this occurrence.

    There will be over 20 widgets created and a global rule makes the most sense.

    I removed the rule I had created —which seemed to contain the image a little better, but messed up the aspect ratio. (I noticed that the images are all different sizes that are uploaded to the mls)

    I also tried some negative padding css tricks which also did not work for me (to preserve the aspect ratio) I am stumped!

    THE IDEAL…an image that fit in the container (three column flexible grid) and the overflow would be hidden.

    I did not like the way the images performed with a static width/height (especially on a desktop) but I would not be opposed to media breaks if the responsive element will not work.

    This is the code I had in my theme css that worked (sort of). Now removed.

    .idx-slideshowPhotoElement
    {
    display: block;
    max-width: 100%;
    max-height: 253px;
    overflow: hidden;
    }

    The only code I have added to the child theme (so I don’t have to add to every widget) is

    div.IDX-customCaption {
    display: none;
    }

    I am mostly concerned with overflow. Setting the width/height is the easy solution, but the responsive widget should be able to work.

    The challenge – NO CONTROL OVER THE SIZES OF IMAGES UPLOADED BY THE AGENT. I feel like this should be able to be handled with css.

    Anyone smart enough to find a solution? It is beyond me!!

    Your help is greatly appreciated

    Nancy

    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • idxforgeidxforge
    Participant
    Post count: 31

    your css looks close, but i’d try giving the image a width of over 100% while keeping your height and width of the container exact. some of the thumbnail will be cut off when it overflows on the edges but i’ve done it a few times and it usually looks just fine.
    If you’d like me to do it up and send you the css i can do it super quick and pretty cheaply, just email me ren@idxforge.com

    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...

You must be logged in to reply to this topic.