Help Css Conflict With Ewrmedio / Css Height Control

I was having a css conflict with another plugin (i think it was EWR_medio) where changes to the "grid item width" were having no effect. whatever i changed the value to didn't do anything.

fortunately, i solved this by adding !important to the max/min width control elements in sonnb_xengallery_album_list_item.css like so:

Code:

.itemGallery {
    @property "sonnbXenGalleryGridItem";
    margin: 0 0 10px;
    position: relative;
    min-height: 110px;
    float: left;
    border: dotted #525151 1px !important;
    @property "/sonnbXenGalleryGridItem";;
    max-width: @sonnb_xengallery_itemwidth !important;
    min-width: @sonnb_xengallery_itemwidth !important;
    margin-right: @sonnbXenGalleryGridItem.margin-bottom;
}

this solved the problem, but the only issue i'm having now is figuring out how to fix the grey area that is appearing below each image:



normally this wouldn't be a big deal (they're pretty small) but when viewing the gallery on mobile devices the grey area gets pretty huge.

i'm assuming this is a 'max-height' css issue, but i can't seem to find out to fix it since my css skills are a bit mediocre.

 

hmm... i don't think i'm changing anything having to do with a widget. i'm only making changes to sonnb_xengallery_album_list_item.css.

what i was saying before is that something in the [bd] widget framework plugin or a widget in the plugin is disabling changes to the 'grid item width':



i've come to this conclusion since looking at it with google chrome's 'inspect element' feature shows that .itemGallery .img a img { max-width: 222px; } is being ignored:



that, and of course, the fact that changes in the 'grid item width' (as stated above) have no effect on the width of each picture in the grid, until 'important' is added to "max-width: @sonnb_xengallery_itemwidth" in the template 'sonnb_xengallery_album_list_item.css'.

here's a screen shot of what it looks like on my android phone in dolphin browser, after making the !important adjustment above:



thanks for your help, i apologize if i'm doing something wrong or interpreting something incorrectly

 

ok, i understand what you're saying, but here's what my website looks like when i remove the !important from the css (note that i have NOT changed the 222px in 'grid item width'):



it will remain looking like this no matter what i enter in the 'grid item width' field. even if i enter 5px or 5000px, nothing changes...

 

http://squattheplanet.com

 

ah.. i see. removing the !important from the border removes the border and corrects the alignment of the pictures:



but it looks so much nicer with the border

can you suggest what i can do to keep the border without breaking the layout? thank you for your patience!