Keep buttons with columns on mobile?

Site URL: https://www.iwpcapital.com/database-info-1

Hi!  I'm working on a site that has a subscription service for an app they developed.  Their are monthly, annual, two-year and three-year subscription plans.  I have laid these out in columns but when viewing on mobile, the buttons don't stay with their subscriptions (which I understand due to responsiveness hierarchy).  Anyone have a workaround/solution to get the buttons to stay with their subscriptions?

Thank you in advance for any suggestions you might have!!  🙂

Hello,

The column layout of the text and layout of buttons have been separated when they need to be in one column in order to stay together. The buttons are in their own row which is why all of them shift away from their respective text box/column on mobile devices. A possible solution is to edit the page and drag the button directly under the text of each column to "reset" the position. You should see a small blue line on the bottom border of the text box. If that doesn't work, you may need to try again, this time by removing the buttons and placing them back onto the page directly under each of text boxes. If you're still having issues, we will need to force this action with some CSS.

-Dan

On 5/21/2021 at 10:10 PM, Celeste_Woodside said:

Site URL: https://www.iwpcapital.com/database-info-1

Hi!  I'm working on a site that has a subscription service for an app they developed.  Their are monthly, annual, two-year and three-year subscription plans.  I have laid these out in columns but when viewing on mobile, the buttons don't stay with their subscriptions (which I understand due to responsiveness hierarchy).  Anyone have a workaround/solution to get the buttons to stay with their subscriptions?

Thank you in advance for any suggestions you might have!!  🙂

You can add 4 text links for 4 text blocks. Then we will give the code to turn links to buttons, with style same as current button.

On 5/21/2021 at 5:43 PM, Wolfsilon said:

Hello,

The column layout of the text and layout of buttons have been separated when they need to be in one column in order to stay together. The buttons are in their own row which is why all of them shift away from their respective text box/column on mobile devices. A possible solution is to edit the page and drag the button directly under the text of each column to "reset" the position. You should see a small blue line on the bottom border of the text box. If that doesn't work, you may need to try again, this time by removing the buttons and placing them back onto the page directly under each of text boxes. If you're still having issues, we will need to force this action with some CSS.

 

-Dan

This worked!  Thank you!  Now looking at it, I realized I put 4 spacers across because the buttons weren't aligning and dropped the buttons under them.  Make sense that this would screw up the mobile view.  So that part is fixed (thanks again!) but now my buttons are back to not lining up.  Any ideas on how to fix?  https://www.iwpcapital.com/database-info-1

On 5/25/2021 at 12:34 AM, Celeste_Woodside said:

This worked!  Thank you!  Now looking at it, I realized I put 4 spacers across because the buttons weren't aligning and dropped the buttons under them.  Make sense that this would screw up the mobile view.  So that part is fixed (thanks again!) but now my buttons are back to not lining up.  Any ideas on how to fix?  https://www.iwpcapital.com/database-info-1

To align 4 buttons, add this to Design > Custom CSS

/* Align 4 buttons */
@media screen and (min-width:641px) {
div#block-9444912ec46904548d0d+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#block-9444912ec46904548d0d+.row .span-3 {
    flex: 1;
    position: relative;
}
div#block-9444912ec46904548d0d+.row .span-3 .button-block {
    position: absolute !important;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 100%;
}
}

You are amazing!  This worked and all is right in the world (or on my page at least).

Thank you!!