1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Dismiss Notice
What Do You Need In The Xf2 Xengallery Version? Vote for your choices here: http://www.sonnb.com/threads/what-do-you-need-in-the-xf2-xengallery-version.1539/

Help Css Conflict With Ewrmedio / Css Height Control

Discussion in 'XenGallery' started by moshbit, Mar 1, 2014.

  1. moshbit

    moshbit Authorized Member Authorized

    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:

    .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.
  2. sonnb

    sonnb Administrator Staff Member

    Actually widget's width will not help you. XenGallery (XG) will calculate the grid's size based on your browser's width which make XG responsive. By adding important!, you are disabling the responsive ability of XG.

    On mobile devices, depends on mobile's resolution, the width will vary. Can you show me the screenshot with gray area?
  3. moshbit

    moshbit Authorized Member Authorized

    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 :D
  4. sonnb

    sonnb Administrator Staff Member

    For the first point, that is currently the way XenGallery works to make itself responsive. If it takes your setting (which is 222px) to be the final value, you will see some blank space on the right because 222px * 3 will not fit your current browser's width.

    That also make the issue as you can see in your mobile device because you have fixed the width, it cannot be responsive anymore.
  5. moshbit

    moshbit Authorized Member Authorized

    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...
  6. sonnb

    sonnb Administrator Staff Member

    Please give me your site URL for investigation.
  7. moshbit

    moshbit Authorized Member Authorized

  8. sonnb

    sonnb Administrator Staff Member

    It is because of your changes.


    You have added !important to the border of this class. It makes the total width of items exceed container's width.
  9. moshbit

    moshbit Authorized Member Authorized

    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 :p

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

    sonnb Administrator Staff Member

    Because you have removed the box-shadow property in .itemGallery css. This property will have you to have border alike.

Share This Page