[Resolved] Text and image grid cell alignment

[Author]

Posts

[Roki]

I am trying to: This are 2 grid cells. I added text into one and an image into the other. I am trying to make the "blue text box" and "image box" the same size no matter what display resolution they are shown. In the attached images you can see how they are different for different display resolutions.

I visited this URL: please provide a private field where I can paste down the page link and password (the page is set private)

I expected to see: The image and text boxes resizeing proportionally

Instead, I got: Depending on the screen resolution, the text box is smaller/taller than the image box. Thank you in advance

[Mohammed]

Hi Roki,

Thank you for contacting the Toolset support forum.

I'm Mohammed, the Toolset support team leader. I will do my best to help you.

I see that this can be fixed using Jquery. Before starting working on it, We need to agree together, which one will depend on the other.

I'm thinking of that, the image height will depend on the text or the inverse.

In other words, in all cases, we can catch the text cell height and then set he height of the image to be equal to the text height or vice versa.

Please let me know your decision.

I will set the next reply as a private one so that you can provide your website access credentials and FTP access and also the page password.

I will be waiting for your reply.

Thanks.

[Mohammed]

Hi Roki,

The following worked with the first row perfectly but didn't work as expected with the rest of rows because the text boxes and images styles are not the same in all the rows.

Add the following script to the footer of your theme:

<script>
jQuery(document).ready(function($){
jQuery('.light_blue_tetra1,.light_blue_tetra2,.light_blue_tetra3').each(function(){

jQuery(this).height(jQuery(this).parent().find('.alignnone').height()-15);
});
 });
</script>

Add the following syle to the footer of your theme:

<style>
.alignnone {
    margin: 0px 20px 20px 0;
}
</style>

So, please make sure that all the images and text boxes paddings and margins are the same and try the previous code.

Thanks.

[Roki]

Thank you very much, with small edits on your suggestion I managed to resolve the issue. Have a nice weekend! ????

p.s. Could you please remove the images from my first post or just blur the text? There have been some changes and this text wont go public. Thank you

[Mohammed]

Done 🙂