Two Column Page

New Member
31 0 0

Hi All. On my nonprofit grant request page, I turned it into a two column page. When on the desktop, it looks pretty good. But on mobile, it looks horrible. 

 

To see what I am referring to, visit the page I am referring to by going here:

https://www.pennsylvaniaparks.org/pages/apply-for-grant

 

When on your desktop, you will notice it looks good. But when you hop on your phone or move your browser to make it mobile, you will notice that between the left and right columns tons of white space. I dont know how to fix this. When on mobile, the left column is on top and the right column is under the left column. Which is how its suppose to be. But with all that white space, it looks horrible.

 

Any idea on how to fix that?

 

Here is the code I used:

 

<meta name="viewport" content="width=device-width, initial-scale=1" />
<style><!--
* {
box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 1450px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
--></style>
<div class="row">
<div class="column" style="background-color: #ffffff;">
<p><img src="https://cdn.shopify.com/s/files/1/2088/8447/files/dirt-road-forest-landscape-163703_f4238476-f6ca-44..." alt="" /> <br /><strong></strong></p>
<h3><strong>Your Park Needs Funding. Thats why we were created.</strong></h3>
<p><strong>Funding is literally a click away.</strong> No matter how large or how small your park is, you are important to your local community. Therefore, you are important to us here at the PPF.</p>
<p><strong>We were created to fund all parks and forest throughout Pennsylvania.</strong> Starting in March 2020, you will be able to begin applying for grants. Grants are issued on a first come, first serve basis. Ultimately, our goal is to never turn down a funding request. We will begin providing funding in May 2020.</p>
<p><strong>God Bless America and God Bless Our Parks!</strong></p>
</div>
<div class="column" style="background-color: #ffffff;">
<p>
<script type="text/javascript" src="https://form.jotform.com/jsform/80577780384165"></script>
</p>
</div>
</div>

 

 

Thanks in advance!

0 Likes
New Member
31 0 0

Btw, I am using the debut theme.

 

Thanks!

0 Likes
Highlighted
Trailblazer
233 27 29

add the given css to the end of theme.scss file , this will solve issue of the space

 

@media screen and (max-width: 767px){
.column {height: auto !important;}
}
you are welcome to contact / donate small amount to me.
My email - suyash.patankar@gmail.com

paypal.me/suyashpatankar
0 Likes