Overflow Issue with responsive slide show widget

[Nancy Gernand]

#558

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 votes, rated)
You need to be a registered member to rate this post.

Loading...

[idxforge]

#560

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 votes, rated)
You need to be a registered member to rate this post.

Loading...

[Author]

Posts