• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

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.
Section 2 AND html.PNG
Section 2-not aligned.PNG
Section 3 AND html.PNG
Section 3-not aligned.PNG
[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]
 

Attachments

  • Section 1 AND html.PNG
    Section 1 AND html.PNG
    1.2 MB · Views: 4
  • index_html.txt
    16.4 KB · Views: 1
  • style_css.txt
    22.2 KB · Views: 2
Last edited:
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...
Section 1-w_flex-NO_SINGLE-ROW.png

----------------BAD---------------------GOOD (But No longer works)
Section 1-w_flex-NO_SINGLE-ROW-2.pngsmartphone_example-1.png

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.
 
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!
 

New Threads

Latest posts

Buy us a coffee!

300x250
Top Bottom