Mobile view gets distorted

I'm not seeing any distortion on mobile?: https://www.screencast.com/t/mjTd7kzi

All of the columns are stacked as they should be.

Please look on the iPad

Hi there,

I see a lot of styles that's causing the problem and making it not responsive.

For example the min-height in .home-page-right-widget class and all the padding-left and padding-right with the p tag.

Did you build this from scratch? I would recommend wrapping everything in div or span instead of using inline style so you can target them using media query:
https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

Let me know if this helps.

This is what you mean by distorted?: https://www.screencast.com/t/fvxNivhj3r

If not, can you show me a screenshot of what you're seeing?

Yes Tom, that's what I mean by distorted. But "STAY IN TOUCH" corner is also distorted. As Leo said, it is built from scratch. I wasn't sure how to align everything the way I wanted into one div.

I am not able to do anything with columns height on the iPad view. But also the "STAY IN TOUCH", the right corner footer widget also has issues. I tried to use inline css, but it doesn't look correct on either mobile view. I also added media queries, but not sure if they are targeting.
If you can take a look at I would greatly appreciate it.

I'm not seeing "distortion", but they are different heights. You just want to force them to be equal heights?

If so, you could do this:

.home-page-columns-style {
    height: 100%;
}

I'm not sure I'm seeing what's wrong with the footer box - can you show me a screenshot?

https://www.screencast.com/t/6nPElMEN
http://www.screencast.com/t/8M0Scv37

height:100%; - doesn't seem to work either.
The second image is the footer widget on the iPad.

Sorry what is the Stay in Touch box supposed to look like on tablet? Can't picture something that actually look good.

For the footer widget, maybe use the grid system to create the two columns instead of your custom CSS:

<div class="grid-50">
    Left side
</div>
<div class="grid-50">
    Right side
</div>