---
description: >-
  You may have noticed that, the button is jumping up and down on the screen.
  Let's fix it!
---

# Fixing the jumping button

* Right click on your code and choose `Add to backpack` This will save the code.

{% hint style="danger" %}
:alarm\_clock: **Important:** If you do not save your code at this stage, you are going to lose it in the next step.
{% endhint %}

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FfisncvkN9WyE0fPmbPZT%2FScreenshot%202025-03-24%20132734.png?alt=media&#x26;token=b38ac52d-a254-473b-9fe9-853c507cbba3" alt=""><figcaption></figcaption></figure>

* Delete the code! Accept all warning messages.
* Go back to the `Designer` tab, and delete the `Image` and the `Button` blocks. To delete, select the block from the component tree and press `Del` on the keyboard. We are now starting with an empty screen.
* From `Layout` drag and drop two `Vertical Arrangement` blocks on the screen.

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FwCyBtmxzoBsZl4HWBGFe%2FScreenshot%202025-03-24%20133402.png?alt=media&#x26;token=d09df9ee-d093-4e11-b7b1-4cb2465d8dc7" alt=""><figcaption></figcaption></figure>

* For the first vertical arrangement, set the width to fill the parent, the height to 80%, and the horizontal and vertical alignment to the center.
* For the second vertical arrangement, set the width to fill parent and the horizontal and vertical alignment to center.

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FH5wcGCrs6SujN8UN2CzH%2FScreenshot%202025-03-24%20133735.png?alt=media&#x26;token=d29844f5-d123-445a-8b4f-da25af710c5a" alt=""><figcaption></figcaption></figure>

* Drag and drop an `Image` block inside the first vertical arrangement, and style it to `Scale Picture To Fit`  with the width and height set to `Fill parent`&#x20;

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FLj6hD9vNaeblOHlvpLWs%2FScreenshot%202025-03-24%20134114.png?alt=media&#x26;token=9c563f5e-404e-49e2-935c-a00210ec96b2" alt=""><figcaption></figcaption></figure>

* Drag and drop a `Button` component inside the second vertical alignment. Style it by changing the text to "Hide" and setting the width to `Fill parent`&#x20;

<figure><img src="https://4150609950-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FagfmHwJEF69bMnbybhxL%2Fuploads%2FknllyfYKE7bBGdv4dtWn%2FScreenshot%202025-03-24%20134339.png?alt=media&#x26;token=1ce41655-90c7-4249-8c5a-e03db03fda07" alt=""><figcaption></figcaption></figure>

* Click on the `Blocks` tab, click on the backpack icon and drag and drop your code.
* :tada: Test your app! For more information on testing, check [test-your-app](test-your-app "mention")
