Keep form and image in line as page resizes

Highlighted
Occasional Contributor

Hi! My company is trying to create a new landing page where the form will be side-by-side with an image. We don't care as much about the top portion of these lining up, but we do want the bottom part of both the form and the image to line up perfectly. 

 

Is there a code we can implement to achieve this?

Reply
0 Upvotes
3 Replies 3
Advisor

Let's start with the code you already have that is not producing the desired results.  Can you share a link to the sample page and then we can use that to help you get things in alignment?

Reply
0 Upvotes
Occasional Contributor

Here is the sample page: https://www.pfleet.com/new-landing-page-test

 

We want to keep the bottom of the card image and the bottom of the form in line for all desktop screen sizes.

Thanks so much for your help on this!

Reply
0 Upvotes
Advisor

So I'm noticing a couple things with your form content row in your template before we can get into equal height.  On your layout, I am seeing 2x 1-column empty areas on each side of your form.  While I would assume the idea here is to create spacing in your row, these columns don't go away on mobile.  What I would recommend here is to remove both of those columns and use margins and padding on your form and content container in the row to create the necessary spacing.

 

Now for the equal height piece, this method works in most modern browser and IE 10+. If you need support for earlier versions, then you would need to look into alternate solutions.

 

On the row container add the following CSS:

 

style="display:flex;width:100%;"

 

On the columns add the following CSS to each column:

 

style="flex:1;padding;16px;"

 

In this example the padding can be adjusted and you can use classes instead of using the styles on each column to make your code cleaner, but that flexbox code should give you the desired results to keep the content in your boxes aligned as this will make the columns equal height.

Reply
0 Upvotes