Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 26, 2014 at 2:40 am #243097
    bdm55

    Hi ..

    Is there anyway to make the Portfolio Grid a little smaller? So I can use smaller images say 200 x 150

    Also .. is there anyway to add some padding between the images displayed.

    Thanks,
    Bill

    March 26, 2014 at 8:34 pm #243512
    Yigit

    Hey bdm55!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .grid-entry .inner-entry { margin-right: 25px; }

    Cheers!
    Yigit

    June 20, 2014 at 4:22 pm #281670
    digihouse

    Hi,

    the problem with this solution is that the whole grid isn’t 100% any more…
    the item on the right schouldn’t have margin right so it aligns perfect…

    We have a 3 Column grid.. in css there is ony “grid-parity-odd” and even…
    is there an easy way to get margins only between the items?

    thx
    chris

    June 21, 2014 at 8:46 am #281920
    Ismael

    Hey!

    Thank you for the info.

    Maybe a padding between the grid entries will suffice. Add this on Quick CSS or custom.css:

    div#grid_id_all_sort div {
padding: 5px;
}

    Regards,
    Ismael

    June 23, 2014 at 12:16 pm #282383
    digihouse

    Hi,

    hmm.. that is not what we want.. we want margins only between the items – the whole row should be 100%.
    This works fine:
    #top .no_margin.av_one_third {
    width: 29.3333%;
    margin-left: 6%;
    }

    body div .first {
    margin-left: 0 !important;
    }

    The Problem -> as soon i click to sort the Items -> the margins do not work because the CSS doesn’t change.

    I also searched the isotope website -> but there is no solution -> can’t be?

    thx
    Chris

    June 23, 2014 at 12:45 pm #282394
    Yigit

    Hi!

    Please add following code to Quick CSS and adjust

    .grid-entry:nth-child(2) {
padding-right: 10px;
padding-left: 10px;
}

    For more information on using nth-child, please see – http://css-tricks.com/how-nth-child-works/

    Cheers!
    Yigit

    June 23, 2014 at 1:10 pm #282422
    digihouse
    This reply has been marked as private.
    June 24, 2014 at 5:56 am #282815
    Josue

    Hi Chris!

    I was playing with the Isotope script on my sandbox installation and i think i got something, check if this is what you want to achieve.

    Regards,
    Josue

    June 24, 2014 at 10:44 am #282920
    digihouse
    This reply has been marked as private.
    June 25, 2014 at 12:24 am #283329
    Josue

    Hey Chris!

    Check it now.

    Regards,
    Josue

    June 25, 2014 at 11:07 am #283500
    digihouse
    This reply has been marked as private.
    June 25, 2014 at 6:52 pm #283714
    Josue

    Hi,

    Use this modified js/avia.js + this custom CSS:

    @media only screen and (max-width: 767px) {
  #top .grid-sort-container .isotope-item {
    width: 100% !important
  }
}
@media only screen and (min-width: 767px) {
  #top .grid-sort-container.grid-col-2 .isotope-item {
    width: 46.5% !important
  }
  #top .grid-sort-container.grid-col-3 .isotope-item {
    width: 28.7% !important
  }
  #top .grid-sort-container.grid-col-4 .isotope-item {
    width: 19.8% !important;
  }
  #top .grid-sort-container.grid-col-5 .isotope-item {
    width: 14.5% !important
  }
  #top .grid-sort-container.grid-col-6 .isotope-item {
    width: 10.99% !important
  }
  #top .grid-sort-container .isotope-item{
      margin-bottom: 52.4px;
  }

}
@media only screen and (min-width: 989px) {
  #top .grid-sort-container .isotope-item {
      margin-bottom: 72.4px;
  }
}
@media only screen and (min-width: 1139px) {
  #top .grid-sort-container .isotope-item {
      margin-bottom: 82.4px;
  }
}

    Regards,
    Josue

    • This reply was modified 9 years, 9 months ago by Josue.
    June 26, 2014 at 12:55 pm #284046
    digihouse

    Hi Josue,

    you’re my hero.. works great…

    thx a lot
    Chris

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Changing Portfolio Grid Image Display size and padding (ENFOLD THEME)’ is closed to new replies.