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]

 

[R3V01UT10N]

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

So I've been playing with it, and while i DID get it to work down to a certain size, once you hit a phone screen size in portrait mode, the 3 columns no longer will fall underneath each other like they need to...


----------------BAD---------------------GOOD (But No longer works)


That's what I was asking before, was if I did all of this, if it would end up removing the option to view all columns vertically if in portrait mode on a cell phone or other device... and it did.

 

[LTomy]

You could, using a responsive design, add 'flex-direction: column;' (To the row) when the width of the screen becomes too small.

 

[Malcolm]

Hey @R3V01UT10N,

Did you find a solution for this?

 

[R3V01UT10N]

Hey @R3V01UT10N,

Did you find a solution for this?

I did, it just took a lot of learning about flex formatting and experimenting around with the html and css to figure out what to target properly, to get it to work properly.
I would post the code here, but theres just to much of it to pick out all the parts that made it happen! lol
Feel free to hop on the site and check out the source code tho!