Column Height issues as well as Mobile hover

I’ve been having two issues, both on the same page. I can’t seem to get the columns boxes to be the same height. They always adjust depending on screen resolution (obviously this is wanted). What I don’t what is for one of them to be two of three pixels larger than the other column. I’ve tried CSS, js, and flexbox with no luck. As you can see the first image than Beauty & craft next to it. The gray is an image with the same height. I want them to be the same size on the column. I’

My second issues are on mobile version on that page with the blue hover effect the text appears and then goes away. I believe it because of the text box. I tried adding I overlay to the textbox with no luck. I would like there to be a blue overlay on mobile without it flashing for a second. I also tried to get rid of the text box but in turn that just made the text not show up.

Site http://206.189.231.71/client-services/

Hello There,

Thank you for the very detailed post information.

1.) The 3 pixel difference in your column is because of the padding you have applied to the column containing the image. Please make sure that all your columns have a 0 padding and this should resolve your issue.

2.) The hover in touch devices is triggered by tapping the screen. If you tap outside of the text and within the column it will display nicely. But if you tap in the text, the blue overlay or the text does not properly display. Please make sure that your transitions is sync which means that the display of the overlay and the text should be using the same duration. In your case, the overlay is using 1s opacity duration while the text is using just 0.5s when displaying. Make it the same and see how it goes.

Hope this helps.

I was able to fix the hover on touch for mobile.

I am still having issues with the columns.

I have two pages now

One with No padding.
http://206.189.231.71/about/

Similar issues, two images same height as the column next to it but its uneven.

Same with

http://206.189.231.71/client-services/

Hey Mack,

The issue is with the difference in aspect ratio of the image in the left and right columns. In the screenshot below, you will want to assign a background color to your column. See https://youtu.be/ZKrU4wWcrrU

This grid setup is best achieved using either The Grid or Essential Grid plugins though. Please check out the demos below.


https://theme-one.com/the-grid/roma/
https://theme-one.com/the-grid/justified-alofi/
https://theme-one.com/the-grid/justified-dacca/

For more details about those plugins, please see the links below:


If you wish to continue with your setup, seeing this setup demo might help.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.