Top
How do I align and resize two buttons in a Pop-up?
  • 10 Mar 2025
  • 1 Minute To Read
  • Dark
    Light
  • PDF

How do I align and resize two buttons in a Pop-up?

  • Dark
    Light
  • PDF

Article summary

You created a Pop-up and you want to add two call-to-action buttons to it along with text. However, for some reason the buttons are not aligned in the same row. Fix the alignment problem by using the HTML and CSS code view. You can also use the Button Resize option on the Pop-up button to further adjust the size and spacing of the buttons correctly.

DB_Pop-up_buttons_notaligned.png Follow these steps to fix it with simple HTML and CSS code changes:

  1. Click the corner of any button (either the Skip or Register button).

  2. Go to the code view.

    DB_Pop-up_buttons_click_CSS.png

  3. Go to the HTML code view, locate the respective code for each button, and then adjust their widths.DB_Pop-up_buttonwidth_HTML.png

  4. Switch to the CSS code view and adjust the space between the two buttons. DB_pop-up_buttonspace_CSS.png

Note:

  • After making the changes in the HTML and CSS code view, click Run to ensure all the changes reflect. DB_Pop-up_buttons_ClickRun.png

  • Here’s the Pop-up with the aligned buttons along with the text in the same row. DB_pop-up_buttons_aligned.png

Info:

You can further align the spacing between the buttons in the Pop-up using the Button Resize icon.
Follow the steps to resize the Pop-up buttons:

  1. To change the button configurations, hover your cursor over the button and then click to open the button configuration menu.

  2. Click the Button Resize icon. DB_Pop-up_buttons_resize.png

  3. Once you click the resize option, choose a desired height and width to adjust the buttons accordingly. DB_Pop-up_buttons_resizeoptions.png

    For instance, if you set the Register button height to 50 px and the width to 100 px, here’s how the button appears: DB_Pop-up_buttons_resized.png


Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.