-
Posts
-
I am trying to create a 30 px gap between each of these images on this page. The problem is, when I adjust the padding in my grid row column, the center picture is shorter than the rest. I want to create a 30 px gap between all of the images and have the images line up perfectly. Can you please provide me with some quick css to do this or let me know how I can achieve this? Thanks!
Hi djshortkut!
Thank you for using Enfold.
Set the padding of the cells manually:
First cell:
30px 15px 30px 30pxSecond cell:
30px 15px 30px 15pxThird cell:
30px 30px 30px 15pxRegards,
IsmaelThanks Ismael! I manually changed the padding and it worked except now the height of the center image (top and bottom) is different than the other two images. How can I make it so that the height of all of the images line up?
The overlay background color also doesn’t seem to stretch fully over the image upon hover. I am viewing this on my 21″ iMac screen. Thanks for the help!
Unfortunately that won’t work because I can’t get the images to be the same size as they are now. I’ve already tried it. Isn’t there some way to fix these issues with quick css? Thanks.
Hi!
May we have temporary access to your website so we can take a closer look at your grid row settings?
Also, it’s best to keep a consistent image size across each thumbnail.
Best regards,
DakeHere are my login credentials for you to take a look. I adjusted the padding to what Ismael recommended above to make everything evenly spaced. All of the images are the same size as well so not sure why I am having an issue. When I pull up the site on my iPad the images are not even with each other and same thing on my MacBook Pro. You can see how the images don’t line up on different screen sizes by resizing the screen. They move up and down and are not perfectly in line with each other like they should be. Don’t know if this is some type of bug or not. Please let me know if you need any other info.
Hey!
it works totally fine on my Mac Book Pro. Can you provide us some screenshots of the issue? did you clear browser cache already and hard refreshed a few times? which browser are you using?
Regards,
AndyHere are some screen shots from my MacBook Pro and iPad showing that the alignment is off on different screen sizes. Can you give me some quick css to fix please? Thanks!
Hi!
you are using different image size for the middle image. Use same size and it should work fine. WordPress is cropping images by default when uploading and you can control this with a plugin like: https://de.wordpress.org/plugins/simple-image-sizes/
Cheers!
AndyOk, I updated all of the pictures and now they are all 600×400 but I am still having the same issue. What else can I try?
Hi!
in your source code I can see that you are still using different image sizes, as shown here:
Make them same size. Regenerate thumbnails. Clear browser cache+hard refresh.
Regards,
AndyI see what you are saying Andy. The strange thing is that when I insert the image to that page, I am inserting the “Full Size” image of 600×400 For some reason it is resizing it after it has been uploaded so they are not all the same size. I’m not sure what to do to make them all the same size when they are uploaded. I have tried uploading different sizes and it still adjusts the image sizes differently. What can I do to get this to work correctly and have the same image size?
Hi!
I edited your cells and set padding on all to 30px 15px 30px 15px. Please review your website now
Best regards,
Yigit
- The topic ‘Grid Row Alignment Help’ is closed to new replies.