---
title: "How do I align and resize two buttons in a Pop-up?"
slug: "how-do-i-resize-the-buttons-in-a-pop-up"
updated: 2025-11-25T06:50:22Z
published: 2025-11-25T06:50:22Z
canonical: "support.whatfix.com/how-do-i-resize-the-buttons-in-a-pop-up"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

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 issue by using the HTML and CSS code view. You can also use the **Button Resize** option on the Pop-up to further adjust the size and spacing of the buttons correctly.

![DB_Pop-up_buttons_notaligned.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttons_notaligned.png)Follow these steps to fix the button alignment using HTML and CSS:

1. On the Pop-up, 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttons_click_CSS.png)
3. In the **HTML** code view, locate the respective code for each button, and then adjust their widths.![DB_Pop-up_buttonwidth_HTML.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttonwidth_HTML.png)
4. Switch to the **CSS** code view and adjust the space between the two buttons. For example, use margins to create space around the buttons or use padding to increase internal spacing within each button.![DB_pop-up_buttonspace_CSS.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_pop-up_buttonspace_CSS.png)
5. 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttons_ClickRun.png)

> [!WARNING]
> Note:
> 
> Here’s the Pop-up with the aligned buttons along with the text in the same row. ![DB_pop-up_buttons_aligned.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_pop-up_buttons_aligned.png)

> [!NOTE]
> Info:
> 
> You can further align the spacing between the buttons in the Pop-up using the**Button Resize** icon.
> 
> Follow these 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttons_resize.png)
> 3. Once you click the resize option, enter a desired height and width to adjust the buttons accordingly. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Resize_popup(1).png)
> 
> For example, 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Pop-up_buttons_resized.png)