Button alignment

Site URL: https://spinach-keyboard-w7ws.squarespace.com/fallsikringskurs

Hello!

I've made a two column layout with one button at the bottom of each column.

I would like to align the two buttons on the same horizontal level in desktop mode.

I know this can be achieved by adding a line break, before adding the two buttons. But this makes the layout display wrong on mobile, since the two columns breaks into one column (below each other) on mobile, and the buttons will then be placed at the bottom of both text boxes.

Any idea anyone?

10 hours ago, Erlend-fs said:

Site URL: https://spinach-keyboard-w7ws.squarespace.com/fallsikringskurs

Hello!

I've made a two column layout with one button at the bottom of each column.

I would like to align the two buttons on the same horizontal level in desktop mode.

I know this can be achieved by adding a line break, before adding the two buttons. But this makes the layout display wrong on mobile, since the two columns breaks into one column (below each other) on mobile, and the buttons will then be placed at the bottom of both text boxes.

 

Any idea anyone?

Flexbox may help

@media only screen and (max-width: 768px) {
      section[data-section-id="6052fff2787304435eeb60b2"] .content > .sqs-layout .row:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch; 
        align-content: center;
      }
      section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 {
        position: relative;flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;width: 50%;
      }
      section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 .sqs-block-form {
        position: absolute;
        width: ~"calc(100% - 34px)";
        bottom: -50px;
      }
}

Works great!

I chose to use "min-width: 767px", since I am happy with how the page displays on mobile.

@media only screen and (min-width: 767px) {
      section[data-section-id="6052fff2787304435eeb60b2"] .content > .sqs-layout .row:nth-child(2) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch; 
        align-content: center;
      }
      section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 {
        position: relative;flex-grow: 1;
      flex-shrink: 1;
      flex-basis: auto;width: 50%;
      }
      section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 .sqs-block-form {
        position: absolute;
        width: ~"calc(100% - 34px)";
        bottom: -50px;
      }
}

Thanks a lot bangank36

@Erlend-fs Do you want to fix these?

Site URL – https://spinach-keyboard-w7ws.squarespace.com/

1. (Mobile-Homepage) Change to 2 logos/row?

2. (Mobile-Homepage) Reduce this space?

3. (Tablet-Munchmuseet) White bar on right of screen

4. (Redningskurs) You haven’t changed SEO Title, so the browser tab name still shows “Services 1”

5. (Utstyrssalg) Similar on this page

6. (Periodisk-kontroll) and some other pages