-
Posts
-
On the page in my under-construction website where I am testing grid rows, I am using an image that measures 1600 x 1200, so it’s a perfect 4:3 ratio. I set the alignment in Image Settings for Center. In Edit Cell, I set the vertical alignment for Top and the padding all around for zero. I created two test rows. For the first test row, I chose the photo size as Portfolio, 495 x 400. For the second test row, I chose Gallery, 845 x 684.
On my desktop screen with a horizontal resolution of 1600, the two test rows look exactly the same. The photos are the same size and the same cropping. There is no space between the photos. There is no space between the photos and the next layout element on the page, which for experimental control purposes is Animated Numbers.
SO, for my actual homepage, I created photos with an original size of 500 x 375, a perfect 4:3 ratio with a width big enough to push the total of the four photos across the screen. I chose the same alignment and padding settings. I chose the photo size as Full Size. In three of the Grid Row cells, I inserted a photo. In the fourth, I inserted Video with a link to the video and a setting for a 4:3 ratio.
But instead of the images extending vertically all the down way to the next element (in my test, it’s Animated Numbers), there’s a border at the bottom of each image! I know for sure it’s a border because when I asked for a custom border color in that cell – which I don’t actually want, this was just to test – the color filled in.
I even tried using a test image measuring 500 x 400, which is BIGGER than the Portfolio size, but I STILL get a border at the bottom. This makes no sense! Why would 495 x 400 go flush down to the next element but 500 x 400 yield a border?
WHY IS THIS HAPPENING? HELP!!!
Here is the link to my album with four pages: homepage, grid row test page, and the back ends of each page.
Hi missouriartscouncil!
Thank you for using Enfold.
It’s probably a preset margin or padding of the image or video element. Please provide a link to the actual page with the issue. We will need to inspect it.
Best regards,
IsmaelHere it is, the homepage:
Hi,
Thank you for the info. I checked the home page and the border is gone. Did you manage to fix it?
Best regards,
IsmaelIt turns out that the developer who is helping us did a quick-and-dirty fix that hides the border – he created a CSS code that set the color of the border of the grid row to match the color of the footer. But in reality, the border is still there. Just now I deleted that CSS, and now the border is showing again. Since we won’t always be placing photo grid rows just above the footer, I’d rather know how to permanently fix the issue.
Hi,
As i understand you would like to remove the gap/border that appears below these 4 images just above the footer correct?
We need to take a closer look at it please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- the URL to the login screen
- a valid username (with full administration capabilities)
- as well as a password for that username
Best regards,
Vinnie“As i understand you would like to remove the gap/border that appears below these 4 images just above the footer correct?”
Yes, that’s exactly right! And I want to know how to prevent a gap/border from appearing when I create other grid rows of images in the future.
I suspect the problem might lie within the box with the video, because on a test page when I used only images, I didn’t get a border.
Hi,
We added the following code in the Quick CSS field:
.flex_cell .avia-video, .flex_cell .avia-iframe-wrap { margin-bottom: 0; }This will remove the space below the cells but you might see a 1px gap because the bottom padding of the video is percentage base (76%). Why did you add a video in the last cell? Note that you can replace it with an image element then set the url of the video as link. It will then open the video in a lightbox instead of that small box or cell container.
Best regards,
IsmaelThanks for the CSS code. So would I set flex_cell as the special “for developers” ID for that particular Color Section or Grid Row? Or is this code now universal across my site?
“Why did you add a video in the last cell?”
Because I thought that was the way to do it, because Enfold has a Video media element.“Note that you can replace it with an image element then set the url of the video as link.”
That is in fact the way I did some of the links on the Resources / Professional Development Videos page, for the webinars that weren’t hosted on Vimeo. But creating an image is an extra step that because of Enfold’s Video element I thought would be unnecessary for videos that had a nice hosted spot on Vimeo or YouTube. And also, in the columns on that page, the text underneath the Image elements and underneath the Video elements doesn’t exactly align horizontally.“It will then open the video in a lightbox instead of that small box or cell container.”
Right, but all the viewer has to do is click the Full Screen command for Vimeo or YouTube once the video starts running, and voila.Again, I thought this was the way Enfold had set things up to insert videos? If not, how are we supposed to be using the Video element? (soooo confused here)
Hi,
Yes, that is true but the video elements has different css configurations compare to the image element, that’s why you see the disparity in the container. Using an image element will prevent that from happening.
Best regards,
IsmaelAnd I was able to disguise the 1px gap by setting the background color of the column to be the same as the footer. Thanks again!
- You must be logged in to reply to this topic.