Tagged: , , ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 6, 2014 at 11:12 am #205771
    zerozendesign

    Hi guys,

    Wondering how to create some space between the thumbs in a gallery. Please have a look here – http://codelessme.com/casey/abstracts/

    Thanks in advance!
    David

    January 6, 2014 at 5:23 pm #205893
    Yigit

    Hi David!

    Please add following code to Quick CSS in Enfold theme options under Styling tab and adjust as needed

    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
margin-right: 10px;
}

    Cheers!
    Yigit

    January 15, 2014 at 1:08 pm #210019
    zerozendesign

    Hi Yigit,

    I applied a universal margin of 5px to crate even space all the way around HOWEVER, I have selected to display 3 columns but it is only showing 2 http://codelessme.com/casey/abstracts/

    How can I adjust this so 3 columns are displayed?

    January 15, 2014 at 5:47 pm #210130
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
width: 32.3333%;
}

    Regards,
    Yigit

    January 15, 2014 at 6:25 pm #210175
    zerozendesign

    Hey Yigit –

    Doesn’t seem that change did anything. I have implemented with/without !important. http://codelessme.com/casey/abstracts/

    January 15, 2014 at 6:27 pm #210179
    Yigit

    Hey!

    It seems like code is not being applied. Please try adding the code to bottom of Style.css file of your child theme in Appearance > Editor

    Best regards,
    Yigit

    January 15, 2014 at 6:42 pm #210193
    zerozendesign

    Almost there Yigit. It worked for pc, but responsive view jumps down to 2 column again.

    January 15, 2014 at 6:49 pm #210195
    Yigit

    Hey!

    Following code should do it 

    @media only screen and (max-width: 1140px) and (min-width: 990px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 32.2%!important; }}
@media only screen and (max-width: 989px) and (min-width: 768px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 31.8%!important; }}
@media only screen and (max-width: 767px) and (min-width: 481px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 30.9%!important; }}
@media only screen and (max-width: 480px) {
#top #wrap_all .avia-gallery-1 .avia-gallery-thumb a { width: 29.5%!important; }}

    Cheers!
    Yigit

    January 15, 2014 at 11:20 pm #210339
    zerozendesign

    Yigit – you did it. Works like a charm. Much appreciated.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Enfold > gallery > Small thumbs > space between images’ is closed to new replies.