Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Keep buttons with columns on mobile?


Question

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
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 0

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
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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