Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 4, 2015 at 8:39 pm #482955
    D5WDesignGroup

    I am using a grid row on one of my pages. In one section I am using Text Blocks in the grid row to show images with a mouseover effect. The images scale nicely in this section, there is no gap between the images when the browser window is shrunk. In the section below that I have another Grid Row, in this section I am using Code Blocks to show images that have a flip mouseover effect. For some reason when the browser window is shrunk the image scale down but there is an increasing margin appearing below and above the images. Any thoughts on why this may be happening?

    Thank You,

    August 4, 2015 at 9:36 pm #482990
    Basilis

    Hey D5WDesignGroup!

    For me it brakes, when I am on 15″ size.
    I think it is not a proper solution the second one, to use it.

    Cheers!
    Basilis

    August 4, 2015 at 9:38 pm #482994
    D5WDesignGroup

    Do you know of a way I can use the flip on hover effect in Enfold?

    Thanks.

    August 5, 2015 at 4:08 pm #483447
    Ismael

    Hey!

    I checked the page and I guess you managed to make the flip effect work. The only problem I see is the height:

    .flip_container2 {
    height: 381px;
}

    Best regards,
    Ismael

    August 5, 2015 at 6:18 pm #483522
    D5WDesignGroup

    Thanks Ismael,

    The flip has been working, the issue has been the spacing. You will notice that the two rows that have the flip affect spread further apart as you shrink the browser window. I can’t seem to get them to scale the same way that the 3 rows at the top of the page do. Id like there to be no gap on all sides of the images as the browser size changes. Any thoughts?

    Thanks.

    August 7, 2015 at 6:45 am #484296
    Ismael

    Hi!

    Did you test the code above? You can use that code plus a few css media queries to fix the gap below the images. This is how the images look on the browser when you set the height to 381px, monitor resolution is 1920x1080px:

    Regards,
    Ismael

    August 7, 2015 at 6:18 pm #484640
    D5WDesignGroup

    I tried it but when I scale the browser window up or down the rows separate or overlap each other.

    August 10, 2015 at 10:13 am #485121
    Andy

    Hi!

    this does not happen for me. The images are resizing fine for me, without overlapping each other and without any gaps. Which OS and browser are you using? make sure to use newest browser version. Clean browser cache and hard refresh a few times.

    Best regards,
    Andy

    August 10, 2015 at 5:56 pm #485502
    D5WDesignGroup

    The OS is Yosemite. And I am having the issue with the most current versions of Safari and Chrome. Firefox is a complete mess and causes other issues. There should be no gaps on any sides of the images. I removed the other grid row layout to eliminate any confusion. The 3 rows of images that are there now should have no spacing between any of the images all the way around.

    August 11, 2015 at 2:55 pm #485971
    Andy

    Hey!

    I am on Mac OSX 10.9.5 and it looks like this for me on newest Chrome version:

    Is this the look you want?

    Best regards,
    Andy

    August 11, 2015 at 5:52 pm #486102
    D5WDesignGroup

    When I had other (non-flipping) images in these grid rows there was no spacing between that top row and the bottom row. The images should all be tight together with no gaps on the sides as shown but also no gaps above and below, where as now there is a very large gap between the top and bottom rows.

    Thanks.

    August 12, 2015 at 1:36 pm #486526
    Andy

    Hey!

    try to use this code in Quick CSS field:

    .flip_container2 {
height: 205px;
}

    Regards,
    Andy

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