HTML & CSS Trying to get all buttons aligned when changing screen sizes.

[R3V01UT10N]

Since I am not at my computer at the moment, I will simply post the website and explain the issue, and hopefully someone can go and inspect the page for me to give me some advice.
I have 3 sections on the site that contain buttons after text in their columns.
I am wondering how to get those buttons aligned in the bottom of their columns, so when different device sizes are used, they always remain aligned horizontally.
Please refer to the pictures and files below, or go to: www.gandbmoving.com to see the complete website.

***Update:
Below you can see examples of what I have going on. Please note the css for the buttons is listed below the pictures.
I have also attached both the FULL index.html file and the FULL style.css file in .txt format.




[CODE lang="css" title="btn styles ONLY"]/*=======================================================
Main Layout
=========================================================*/
* + .mailform {
margin-top: 71px; }

h2 + p, h3 + p, h4 + h5, * + .social {
margin-top: 0px; }

.off {
font: 900 40px/40px "open Sans", sans-serif;
margin-top: 0px;
padding-bottom: 5px;
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000; }

h5 + p {
margin-top: 8px; }

* + .btn_off, .off-1 {
margin-top: 10px; }

* + .btn_off1 {
margin-top: 20px; }

* + .privacy {
margin-top: -5px; }

------------------------------------------
/*================== Icons ======================*/
/*================== Buttons ======================*/
.btn-wr {
overflow: hidden;
padding-bottom: 35px;
display: inline-block; }

.btn-wr__md {
padding-bottom: 98px;
display: block; }

.btn-wr__md-1 {
padding-bottom: 0;
padding-right: 35px;
margin-left: -4px; }

.btn {
display: inline-block;
width: 102px;
height: 65px;
background: #000;
color: #fff;
text-align: center;
-moz-box-sizing: bordex-box;
-webkit-box-sizing: bordex-box;
box-sizing: bordex-box;
position: relative;
z-index: 0;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s; }
.btn:before {
content: '\f15c';
font-family: "FontAwesome";
font-size: 30px;
line-height: 80px;
position: relative;
z-index: 1; }
.btn:after {
content: '';
position: absolute;
bottom: -22px;
left: -13px;
width: 150px;
height: 150px;
-moz-transform: translate(0%, 0%) rotate(29deg) skewX(-28deg) skewY(5deg);
-ms-transform: translate(0%, 0%) rotate(29deg) skewX(-28deg) skewY(5deg);
-o-transform: translate(0%, 0%) rotate(29deg) skewX(-28deg) skewY(5deg);
-webkit-transform: translate(0%, 0%) rotate(29deg) skewX(-28deg) skewY(5deg);
transform: translate(0%, 0%) rotate(29deg) skewX(-28deg) skewY(5deg);
background: #000;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
z-index: -1; }
.btn:hover {
background: #0097c0; }
.btn:hover:after {
background: #14a941; }
.btn:active {
background: #006f8d; }
.btn:active:after {
background: #006f8d; }

.btn__md {
width: 100%;
height: 0;
background: none; }
.btn__md:before {
line-height: 106px; }
.btn__md:after {
width: 400px;
height: 400px;
-moz-transform: translate(0%, 0%) rotate(28.5deg) skewX(-29deg) skewY(5deg);
-ms-transform: translate(0%, 0%) rotate(28.5deg) skewX(-29deg) skewY(5deg);
-o-transform: translate(0%, 0%) rotate(28.5deg) skewX(-29deg) skewY(5deg);
-webkit-transform: translate(0%, 0%) rotate(28.5deg) skewX(-29deg) skewY(5deg);
transform: translate(0%, 0%) rotate(28.5deg) skewX(-29deg) skewY(5deg);
bottom: -92px;
left: 14px; }
.btn__md:hover {
background: none; }

.btn-large {
font: 600 15px/15px "Open Sans", sans-serif;
text-transform: uppercase;
color: #fff;
background: #000;
padding: 44px 34px 44px 38px;
position: relative;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s; }
.btn-large:after {
position: absolute;
content: '\f08b';
font-size: 30px;
line-height: 103px;
color: #fff;
font-family: "FontAwesome";
padding-left: 24px;
width: 65px;
height: 103px;
right: -65px;
top: 0;
bottom: 0;
background: #14a941;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
pointer-events: none; }
.btn-large:before {
position: absolute;
content: '';
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 51.5px 0 51.5px 34px;
border-color: transparent transparent transparent #14a941;
top: 0;
right: -99px;
bottom: 0;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
pointer-events: none; }
.btn-large:hover {
background: #14a941; }
.btn-large:hover:after {
background: #000;
width: 70px;
right: -70px; }
.btn-large:hover:before {
width: 0;
height: 0;
border-style: solid;
border-width: 51.5px 0 51.5px 34px;
border-color: transparent transparent transparent #000;
right: -104px; }
.btn-large:active {
background: #4f5256; }
.btn-large:active:before {
width: 0;
height: 0;
border-style: solid;
border-width: 51.5px 0 51.5px 34px;
border-color: transparent transparent transparent #0097c0; }
.btn-large:active:after {
background: #0097c0; }

--------------------------------------------
/*========================================================
RESPONSIVE
=========================================================*/
@media (max-width: 1199px) {
.btn__md:after {
bottom: -68px;
left: -23px; }
.btn__md:before {
line-height: 80px; }}

@media (max-width: 991px) {
.btn__md:after {
bottom: -45px;
left: -59px; }
.btn__md:before {
font-size: 25px;
line-height: 60px; }

* + [class*='btn_off'] {
margin-top: 30px; }}

@media (max-width: 767px) {
.btn-wr__md {
padding-bottom: 17%; }

.btn__md:after {
bottom: 0;
left: 50%;
margin-bottom: -25.5%;
width: 800px;
height: 800px;
-moz-transform: translate(-39%, 0%) rotate(27deg) skewX(-40deg) skewY(-4deg);
-ms-transform: translate(-39%, 0%) rotate(27deg) skewX(-40deg) skewY(-4deg);
-o-transform: translate(-39%, 0%) rotate(27deg) skewX(-40deg) skewY(-4deg);
-webkit-transform: translate(-39%, 0%) rotate(27deg) skewX(-40deg) skewY(-4deg);
transform: translate(-39%, 0%) rotate(27deg) skewX(-40deg) skewY(-4deg); }
.btn__md:before {
font-size: 35px;
line-height: 110px; }

.btn-large {
padding-left: 20px;
padding-right: 20px; }
.btn-large:after {
width: 55px;
right: -55px; }
.btn-large:before {
right: -89px; }
.btn-large:hover:after {
width: 55px;
right: -55px; }
.btn-large:hover:before {
right: -89px; } }

@media (max-width: 700px) {
.btn__md:after {
margin-bottom: -26%; } }

@media (max-width: 649px) {
.btn__md:before {
font-size: 30px;
line-height: 75px; } }
@media (max-width: 615px) {
.btn__md:after {
margin-bottom: -26.5%; } }

@media (max-width: 550px) {
.btn__md:after {
margin-bottom: -27.5%; } }

@media (max-width: 499px) {
.btn__md:after {
margin-bottom: -28%; } }

@media (max-width: 479px) {
.btn-wr__md-1 {
margin-left: 0;
margin-top: 10px; }

.btn-wr__md-1 {
padding-right: 0; } }

@media (max-width: 440px) {
.btn__md:after {
margin-bottom: -29%; }

* + [class*='btn_off'] {
margin-top: 5px; }}

@media (max-width: 390px) {
.btn__md:after {
margin-bottom: -30%; }
.btn__md:before {
line-height: 50px;
font-size: 25px; } }

@media (max-width: 350px) {
.btn__md:after {
margin-bottom: -32%; } }[/CODE]

 

[LTomy]

Hi, if you use 'display: flex', you could add 'align-self: flex-end;' to the buttons.
Otherwise, you could set a fixed % height to the texts.

 

[R3V01UT10N]

Hi, if you use 'display: flex', you could add 'align-self: flex-end;' to the buttons.
Otherwise, you could set a fixed % height to the texts.

Thank you for responding! I have tried the flex option but im not sure if im just missing something but it wasn't working for me.
Where exactly would you put both of those?
Im working on copying some of the code to here now.

 

[R3V01UT10N]

Hi, if you use 'display: flex', you could add 'align-self: flex-end;' to the buttons.
Otherwise, you could set a fixed % height to the texts.

@LTomy, I have updated my question with pictures and code from the site. Please take a look and let me know where to put any code to make it work properly.
Thanks!

 

[LTomy]

I would probably add a css propriety like 'height: 50%" (The value is to change) to the <p> elements. That way, even if both texts have different vertical sizes, they will still have the same height (There will be a blank space below them), so the two buttons will be at the same height.

 

[R3V01UT10N]

I would probably add a css propriety like 'height: 50%" (The value is to change) to the <p> elements. That way, even if both texts have different vertical sizes, they will still have the same height (There will be a blank space below them), so the two buttons will be at the same height.

Could you explain a little more of what that would end up doing and be more specific on where you would add what? Would that add space as well in full screen or 'phone view' when the additional space isnt needed?

 

[LTomy]

A better way, but that would require to change the structure of the HTML would be to write something like:

<div class="column">
    <div class="row">
        <h2>Title 1</h2>
        <h2>Title 2</h2>
    </div>
    <div class="row">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <div class="row">
        <button></button>
        <button></button>
    </div>
</div>

The code above would need some tweaking so it works with your website, but that 'structure' should resolve your problem. That way, the paragraphs that are next to another will always have the same height. Since the buttons are placed below the paragraphs, they will have the same vertical position.

 

[LTomy]

Basically, if you want 2 paragraphs to have the same height as the tallest one, you must put them in the same container. There may be better ways, but HTML/CSS is not my specialty.

 

[R3V01UT10N]

A better way, but that would require to change the structure of the HTML would be to write something like:

<div class="column">
    <div class="row">
        <h2>Title 1</h2>
        <h2>Title 2</h2>
    </div>
    <div class="row">
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </div>
    <div class="row">
        <button></button>
        <button></button>
    </div>
</div>

The code above would need some tweaking so it works with your website, but that 'structure' should resolve your problem. That way, the paragraphs that are next to another will always have the same height. Since the buttons are placed below the paragraphs, they will have the same vertical position.

Oof, that sounds like a nightmare. Id probly end up also having to change stuff in the grid.css, pointer-events.js and jquery.rd-parallax.js files to restructure and make that work, huh?
Im guess that would also stop a smartphone view from working properly as well like this as it does now:

 

[R3V01UT10N]

Basically, if you want 2 paragraphs to have the same height as the tallest one, you must put them in the same container. There may be better ways, but HTML/CSS is not my specialty.

Ya im pretty good with it, but this goes a bit beyond my expertise. I've found some examples of other people solving this, but it just doesn't seem to work well with this site with all of the responsive content and the layout....
Unless im just doing something wrong, but im prety sure Im not.
BTW, the current columns on my site ARE already in containers.

[CODE lang="html" title="Section 1 Column/Container Code"]
<section class="parallax well-3" data-url="images/parallax1.jpg" data-mobile="true" data-speed="1">
<div class="container">
<div class="row">
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.2s">

<img src="images/page-1_img01-2.jpg" class="img-wr" alt=""/>

<div class="unit-wr">

<h4>Household
Moving</h4>
<h5>Save the stress,<br>Hire the Best!</h5>

<p>Lets face it, moving is a very stressfull process that you probably don't want to deal with! Hire professionals to get the job done right, and in a fraction of the time it would take yourself to do!</p>
</div>
<div class="btn-wr btn-wr__md">
<a href="#" class="btn btn__md">
</a>
</div>
</div>
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.4s">
<img src="images/page-1_img02.jpg" class="img-wr-2" alt=""/>
<div class="unit-wr">

<h4>Corporate
Relocation</h4>
<h5>Getting ready for<br>a large scale move?</h5>

<p>Hire one company to move all your files, desks, tables, chairs, and everything else in your corporate offices! Know your property will be moved efficiently and safely to your new Headquarters!</p>
</div>
<div class="btn-wr btn-wr__md">
<a href="#" class="btn btn__md">
</a>
</div>
</div>
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.6s">
<img src="images/specialtyitems.jpg" class="img-wr-2" alt=""/>
<div class="unit-wr">

<h4>Heavy
Lifting</h4>
<h5>Need someone strong to<br>move something heavy?</h5>

<p>Have a Piano, Pool Table, Safe or Spa? Need it Moved ASAP? G&B Moving has the experience and muscle to get all of your heavy items moved safe and quickly to their new home!</p>
</div>
<div class="btn-wr btn-wr__md">
<a href="#" class="btn btn__md">
</a>
</div>
</div>
</div>
</div>
</section>[/CODE]

 

[LTomy]

Maybe you could do something like that:

<div style="display: flex; align-items: stretch;">
    <div class="wow" style="display: flex; flex-direction: column;">
        
        <h3></h3>
        <p></p>
        
        <button style="align-self: flex-end;"></button>
    </div>
    <div>
    <div class="wow" style="display: flex; flex-direction: column;">
        
        <h3></h3>
        <p></p>
        
        <button style="align-self: flex-end;"></button>
    </div>
</div>

 

[LTomy]

Both <div> inside the main <div> will have the same height. Each button will be placed at the bottom of its parent <div>.

 

[R3V01UT10N]

So then taking your suggestion, and mixing it with my current code, what edits would you make to the following code (sorry for acting dumber than I normally would be, running on very little sleep for the weekend):

[CODE lang="html" title="current index.html container section"]
<section class="parallax well-3" data-url="images/parallax1.jpg" data-mobile="true" data-speed="1">
<div class="container">
<div class="row">
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.2s">

<img src="images/page-1_img01-2.jpg" class="img-wr" alt=""/>

<div class="unit-wr">

<h4>Household
Moving</h4>
<h5>Save the stress,<br>Hire the Best!</h5>

<p>Lets face it, moving is a very stressfull process that you probably don't want to deal with! Hire professionals to get the job done right, and in a fraction of the time it would take yourself to do!</p>
</div>
<div class="btn-wr btn-wr__md">
<a href="#" class="btn btn__md">
</a>
</div>
</div>
<div class="col-sm-4 wow fadeIn" data-wow-delay="0.4s">[/CODE]

 

[LTomy]

To add to the rows:

display: flex;
align-items: strecth;

To add to the columns:

display: flex;
flex-direction: column;
justify-content: center;

To add to the buttons:

align-self: flex-end;

 

[R3V01UT10N]

I also need to ensure these circled items remain aligned when they're side by side:

 

[LTomy]

As long as the pictures are of the same size, they will be aligned. For the titles, give them a height in %.

 

[R3V01UT10N]

To add to the rows:

display: flex;
align-items: strecth;

To add to the columns:

display: flex;
flex-direction: column;
justify-content: center;

To add to the buttons:

align-self: flex-end;

So for the row and columns, you think i should add your codes to the grid.css file, and for the btn add it to the style.css file?
The pictures I posted below show the file name : line number (on the right side) of each of these elements, but there is more than 1 option for each. By looking at these pictures, which line numbers do you recommend I change to get the intended results?

 

[LTomy]

I do not really understand your question. The solution I proposed will probably need some tweaking for it to work as expected on your website. Do you understand how 'display: flex;' works? If not, you will need to, if you want to understand my previous solution.

 

[R3V01UT10N]

I do not really understand your question. The solution I proposed will probably need some tweaking for it to work as expected on your website. Do you understand how 'display: flex;' works? If not, you will need to, if you want to understand my previous solution.

I'll be honest, ive never used the flex property before, so I know little about it. Ill look into it a bit to try to better understand it.

 

[LTomy]

That property can be very convenient. It is worth looking into it!