Jump to content

Keep buttons with columns on mobile?

Recommended Posts

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

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment
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%;
}
}

image.thumb.png.c377d14ce1fb0d0bb2bd59e68047fc4b.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.