Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 26, 2016 at 1:48 am #717113
    nicosec

    Hi. I am trying to create an image grid similar to the one in the “The Wanderlust Experience” section of this page: http://wanderlust.com/festivals/great-lake-taupo/

    However, I have tried using masonry gallery, grid rows and columns and the images never properly align. I have made columns equal height and that didn’t work.

    Any suggestions you have would be great.

    Thanks!

    November 28, 2016 at 9:03 pm #717970
    Yigit

    Hey nicosec,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then let us know so we can provide you custom CSS code. Editor is missing under Appearance tab therefore i could not apply the changes :)

    Best regards,
    Yigit

    November 29, 2016 at 3:08 am #718072
    nicosec

    Hi Yigit,
    I have enabled the custom css class field. Please advise on the next steps.
    Thanks!

    December 1, 2016 at 4:16 pm #719301
    Yigit

    Hi,

    I created a testing page, link in private content field. I used grid row element instead and gave images custom CSS class and added following code to Quick CSS

    .custom-img { max-width: 57%; }

    Please review your website now

    Best regards,
    Yigit

    December 15, 2016 at 1:38 am #724707
    nicosec

    Hi Yigit,

    That didn’t work for me. When you resize, the items are no longer the same height/width. Also, the spacing between the rows is too spread out. It doesn’t match the sample.

    Please advise.
    Thanks

    December 15, 2016 at 1:40 am #724709
    nicosec

    Similarly, I was trying to use another grid format for text boxes on the below page … however, the boxes still don’t seem to be linked when they resize, It’s like each box is acting independently of the other.

    Dance of the Deer Ceremony » Pacific Cultural Center

    Thanks

    December 19, 2016 at 4:31 pm #726097
    Andy

    Hi,

    can you provide us a mockup showing the results you want to achieve please? then we can provide you some precise css code (use imgur.com, dropbox).

    Best regards,
    Andy

    December 19, 2016 at 10:31 pm #726310
    nicosec

    Hi Andy,

    Mockups and data in the private content section.

    Thanks

    December 20, 2016 at 4:21 pm #726621
    Andy

    Hi,

    if you want to replicate a page or an element inside ALB, then simply use the template function.

    I checked your website and when viewing on mobile devices I can’t see anything wrong. Can you provide us screenshots showing the issue please?

    Best regards,
    Andy

    December 21, 2016 at 7:37 am #726923
    nicosec

    Two questions. 1) what is ALB?

    2) See private content

    December 22, 2016 at 9:21 pm #727671
    Andy

    Hi,

    1.) ALB = Avia Layout Builder

    2.) The link you’ve provided is not working anymore, I get redirected to the homepage instead. Link in private is not showing the elements in question neither. So you can provide us a precise link with the elements in question please? we need to be able to inspect them.

    Please have in mind that WordPress is cropping images by default when uploading them and if you want to control this behavior you can use a plugin like this: https://wordpress.org/plugins/simple-image-sizes
    I hope this will help :).

    Best regards,
    Andy

    December 22, 2016 at 10:30 pm #727685
    nicosec

    Hi Andy,

    You need to be logged in to view the page – you created it as a private page. All of the links I provided you work. I just tested them while logged into our WP backend. Please see private.

    Also, this issue has nothing to do with cropping.

    December 24, 2016 at 10:41 am #728106
    Andy

    Hi,

    there is no special function for this in the theme and thus it will be difficult to achieve this effect. You can try to adjust margin value of the small images:

    .avia-image-container.avia-align-center {
margin-bottom: 6px;
}

    until it fits for you. Then you could adjust image height of the bigger image with a code like this:

    .avia-image-container.av-styling-.avia-builder-el-17.avia-builder-el-no-sibling.avia-align-center img.avia_image {
height: 225px;
}

    You could also turn on custom css class for this image, so the code you need to use gets easier to handle.

    If you need this all to work on smaller devices, too, then you need to wrap media queries around the code.

    Best regards,
    Andy

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.