What this guide is for
This guide shows you how to adjust the mobile version of a page created in Builderall Builder, in a simple and practical way.
Use this guide when you need to:
Adjust images on mobile.
Fix elements that look too big or too small.
Organize spacing between texts, images, buttons, and sections.
Adjust image galleries, sliders, and rotating banners.
Fix iframes that look cut off or misaligned.
Improve how your page looks and works on a phone.
Prevent the mobile page from looking broken, crowded, or hard to use.
1. What the mobile version is
The mobile version is the version of your page that visitors see on a phone.
It is not just a smaller copy of the desktop version.
On mobile, the screen is narrower, elements stack vertically, and there is much less space to work with.
That is why a page can look great on a computer and still need specific adjustments for mobile.
2. Why adjusting the mobile version matters
Many visitors will open your page from a phone.
If the mobile version is not adjusted well, they may see problems like:
Images getting cut off.
Text that is too large.
Text that is too small.
Buttons out of place.
Too much empty space between elements.
Elements too close together.
Sliders with the wrong height.
Iframes cut off.
A page that is hard to navigate.
Adjusting the mobile version makes the page easier to use and gives visitors a better experience.
3. Where to edit the mobile version
Step 1
Open Builderall Website Builder.
Step 2
Open the website you want to edit.
Step 3
Open the page that needs adjustment.
Step 4
Switch to the mobile view or mobile editing mode inside the editor.
Step 5
Make the adjustments while looking at the page as it will appear on a phone.
Important:
Do not adjust only the desktop version and assume everything will look perfect on mobile.
The mobile version should always be reviewed separately.
4. What you need to know before you start
In Builderall Builder, many adjustments are made directly on each element.
That means you may need to adjust:
One image.
One text block.
One button.
One gallery.
One iframe.
One banner.
One specific section.
There is no single magic setting that fixes the entire mobile page.
The best mobile adjustment is done element by element.
5. Main adjustments used on mobile
The most common mobile adjustments are:
Width.
Maximum width.
Minimum height.
Minimum width.
Top spacing.
Bottom spacing.
Left spacing.
Right spacing.
These settings help control the size, position, and space around each element.
6. What width means
Width controls how much space an element takes on the screen.
For example:
An image can take almost the full width of the phone.
Or it can appear smaller, with space on the sides.
On mobile, width is limited by the screen size.
So sometimes increasing the width too much will not create a visible change, because the element can only grow as much as the screen allows.
7. What maximum width means
Maximum width defines how large an element is allowed to become.
This helps prevent an image, button, or iframe from becoming too large.
In some cases, the tablet maximum width setting can also affect how the element appears on mobile.
That is why you should always check the mobile view after changing width or maximum width.
8. What minimum height means
Minimum height defines the minimum height an element should have.
This is very important for elements like:
Image galleries.
Sliders.
Rotating banners.
Iframes.
If the minimum height is too small, the content may look cut off.
If it is too large, the element may take up too much screen space.
9. What minimum width means
Minimum width defines the smallest width an element should keep.
This can be useful for embedded elements, such as iframes.
But on mobile, it needs to be used carefully.
If the minimum width is larger than the phone screen, it can break the layout or create sideways scrolling.
10. What spacing means
Spacing controls the distance between an element and the rest of the page.
You can adjust:
Space above the element.
Space below the element.
Space on the left.
Space on the right.
On mobile, spacing makes a big difference.
An element that is too close to another can look messy.
Too much space can make the page feel long and heavy.
11. When to use top spacing
Use top spacing when an element is too close to the element above it.
Examples:
An image is stuck to the previous text.
A button is too close to the section above.
An iframe is too close to the title.
In this case, increase the top spacing until the layout feels more comfortable.
12. When to use bottom spacing
Use bottom spacing when an element is too close to the element below it.
Examples:
A button is stuck to the next text block.
An image is too close to the next section.
A banner is too close to the content below.
In this case, increase the bottom spacing.
13. When to use side spacing
Use side spacing when an element is too close to the edges of the screen.
This happens a lot on mobile.
Examples:
Text is too close to the left edge.
An image has no margin.
A button is too close to the side.
An iframe has no side spacing.
Adjusting the left and right spacing helps make the content cleaner and easier to read.
14. How to adjust an image on mobile
Step 1
Open the page in the mobile editor view.
Step 2
Click the image you want to adjust.
Step 3
Open the element settings.
Step 4
Adjust the width or maximum width.
Step 5
Adjust the side spacing if needed.
Step 6
Adjust the top and bottom spacing.
Step 7
Check the result in the mobile view.
Use this adjustment when the image is:
Too large.
Too small.
Too close to the edge.
Visually off center.
Too close to another element.
15. Best practices for images on mobile
Use simple images that are easy to understand.
Avoid images with very small text.
Do not leave the image stuck to the screen edges.
Check if the main part of the image is visible on mobile.
Avoid images that are too tall when they do not need to be.
Be careful with banners created for desktop, because they often do not work well on phones.
If the image has important text, make sure it is readable on mobile.
16. How to adjust an image gallery or slider
Galleries and sliders need special attention on mobile.
Besides side spacing, the most important setting is usually minimum height.
Step 1
Click the gallery or slider.
Step 2
Open the element settings.
Step 3
Adjust the side spacing if needed.
Step 4
Find the minimum height field.
Step 5
Increase or reduce the height until the images appear correctly.
Step 6
Test the navigation between images.
The correct height depends on the images used inside the gallery.
If the images have very different sizes or proportions, you may need to adjust the images before using them in the slider.
17. Common problems with galleries and sliders
The image appears cut off.
The gallery is too tall.
The gallery is too short.
The main part of the image disappears.
Images look distorted or unbalanced.
The slider takes too much space on mobile.
The most common cause is incorrect minimum height or images with very different proportions.
18. How to adjust a rotating banner on mobile
The rotating banner also depends a lot on minimum height.
Step 1
Click the rotating banner.
Step 2
Open the element settings.
Step 3
Adjust the side spacing if needed.
Step 4
Adjust the banner minimum height.
Step 5
If the banner has internal pages or slides, review each one.
Step 6
Test every slide in the mobile version.
Important:
In a rotating banner, you may need to adjust both the full banner and each individual slide.
If only one slide looks wrong, review that specific slide.
If all slides look wrong, review the general banner settings.
19. Best practices for mobile banners
Do not use the same horizontal desktop banner without reviewing it.
Very wide banners usually do not look good on phones.
Use short text.
Use images with the main focus in the center.
Avoid adding too many elements inside the banner.
Make sure the button appears correctly.
Check that all slides are readable.
On mobile, clarity matters more than adding a lot of information.
20. How to adjust an iframe on mobile
An iframe is used to embed external content into your page.
Examples:
Embedded video.
Calendar.
Map.
External form.
External page.
Embedded checkout.
Booking area.
On mobile, iframes can appear cut off or oddly sized.
That is why it is important to adjust width, height, and spacing.
Step 1
Click the iframe.
Step 2
Open the element settings.
Step 3
Open the advanced settings if needed.
Step 4
Adjust the side spacing.
Step 5
Adjust the minimum height.
Step 6
Adjust the minimum width if needed.
Step 7
Test the embedded content on mobile.
21. What to check in an iframe
Check if the content appears fully.
Check if there is internal scrolling.
Check if users can tap the buttons.
Make sure the iframe is not cut off.
Make sure it is not creating sideways scrolling.
Check if the external content is also responsive.
Important:
Not every iframe issue is caused by Builderall Builder.
Sometimes the external content was not built to work well on phones.
In that case, adjusting the iframe inside Builderall can improve the fit, but it may not fully fix the issue if the external page is not responsive.
22. How to adjust spacing for any element
Step 1
Click the element you want to adjust.
Step 2
Open the advanced settings.
Step 3
Find the spacing fields.
Step 4
Adjust the left side if the element is too close to the left edge.
Step 5
Adjust the right side if it is too close to the right edge.
Step 6
Adjust the top spacing if it is too close to the element above.
Step 7
Adjust the bottom spacing if it is too close to the element below.
Step 8
Check the result in the mobile view.
Make small adjustments.
On mobile, too much spacing can also hurt the experience.
23. How to know if an element needs adjustment
Look at the page as if you were the visitor.
Ask yourself:
Can I understand the page quickly?
Is the text easy to read?
Does the image look right?
Is the button easy to tap?
Is there enough space between elements?
Is anything stuck to the edge?
Is anything cut off?
Do I need to scroll too much to reach the important content?
If you notice any of these problems, adjust that element.
24. Recommended order to adjust the mobile version
To avoid rework, follow this order:
- Adjust the top of the page.
- Adjust the first visible section on mobile.
- Review the main text blocks.
- Adjust images.
- Adjust buttons.
- Adjust galleries, sliders, and banners.
- Adjust iframes.
- Adjust spacing between sections.
- Scroll through the entire page from top to bottom.
- Publish and test on a real phone.
25. First visible section on mobile
The first visible section is what visitors see first when they open the page on their phone.
That part should clearly show:
What the page is about.
What the main message is.
What action the visitor should take.
If that first section is confusing, has a huge image, or hides the button, the visitor may leave before understanding the offer.
26. Adjusting text on mobile
Even though this guide focuses a lot on visual elements, text also needs to be reviewed on mobile.
Check if:
The headline is not too large.
The text is not too small.
The lines are not too long.
There is enough space between text blocks.
The button appears after the main explanation.
On mobile, long text feels tiring faster.
Use short and clear blocks.
27. Adjusting buttons on mobile
Buttons need to be easy to tap.
Check if:
The button is not too small.
The button text looks good.
The button is not too close to another element.
There is enough space above and below it.
The button appears at the right moment on the page.
A well placed button can make a big difference in mobile conversions.
28. What not to do on mobile
Do not leave elements stuck to the edges.
Do not use images with tiny text.
Do not let huge banners push the main content too far down.
Do not use iframes without testing them on a phone.
Do not adjust only the desktop version.
Do not publish without checking the mobile version.
Do not leave sideways scrolling.
Do not hide the main button.
Do not use huge empty spaces between elements.
Do not assume that if it looks good on desktop, it will also look good on mobile.
29. How to test the mobile version
After adjusting the page, test everything carefully.
Step 1
Review the page in the mobile editor view.
Step 2
Publish the page.
Step 3
Open the page on your phone.
Step 4
Test it in more than one browser if possible.
Step 5
Scroll from the top to the bottom.
Step 6
Tap the buttons.
Step 7
Test links, forms, sliders, and iframes.
Step 8
Check that everything is readable.
Step 9
Make sure there is no sideways scrolling.
Step 10
If you find a problem, go back to the mobile editor and adjust that specific element.
30. Checklist before publishing
Before considering the page ready, check:
The top of the page looks good on mobile.
The main headline is readable.
Images appear correctly.
Buttons are easy to tap.
Galleries and sliders have the right height.
Rotating banners are readable.
Iframes are not cut off.
Side spacing feels comfortable.
There is no sideways scrolling.
There are no excessive empty spaces.
Links work.
The page was tested on a real phone.
31. Troubleshooting
The image is too large on mobile
Adjust the image width or maximum width.
Also check the side spacing.
If the image was created for desktop, you may need to use a more mobile friendly image.
The image is too small
Increase the width or maximum width.
Check if side spacing is limiting the image too much.
Also confirm that the original image has good quality.
The image is stuck to the edge
Increase the left and right spacing.
Make small adjustments until it looks comfortable.
The element is too close to the item above
Increase the top spacing.
If needed, also check the bottom spacing of the element above.
The element is too close to the item below
Increase the bottom spacing.
If needed, adjust the top spacing of the next element too.
The slider is cutting off images
Adjust the slider minimum height.
If the images have very different proportions, standardize the images before using them.
The slider takes too much space
Reduce the minimum height.
Then test all slides to make sure none of them are cut off.
The rotating banner looks strange on mobile
Review the banner minimum height.
Then review each slide individually.
If the banner has too much text or a very horizontal image, create a simpler version for mobile.
The iframe appears cut off
Increase the minimum height.
Check the width.
Test if the external content works well on mobile.
If the external content is not responsive, it may still have issues even after you adjust the iframe inside Builderall.
The iframe created sideways scrolling
Reduce the minimum width.
Adjust the side spacing.
Check if the embedded content has a fixed width larger than the phone screen.
The button went off screen
Review the button width.
Adjust the button text.
Reduce excessive side spacing.
Make sure the button is not inside a block with an incorrect fixed width.
The text is hard to read
Adjust the text size in the mobile version.
Break long text into smaller blocks.
Increase spacing between elements if needed.
The page has too much empty space
Check the minimum height of elements.
Review top and bottom spacing.
See if a banner, iframe, or gallery has an exaggerated height.
The page looks good in the editor, but bad on the phone
Publish the page again.
Test in an incognito window.
Clear the browser cache.
Test on another phone.
Make sure you actually edited the mobile version.
The changes do not appear on the phone
Make sure the page was published after the adjustments.
Test in an incognito window.
Clear the cache.
Test on another network.
Wait a few minutes and test again.
32. FAQ
Do I need to adjust the mobile version separately?
Yes. Even if the page adapts automatically, many elements need manual adjustments to look good on a phone.
Does adjusting the desktop version fix mobile?
Not always.
The mobile version should be reviewed and adjusted inside the mobile view.
Do I need to adjust every element?
Not necessarily.
Only adjust the elements that are misaligned, cut off, too large, too small, or badly spaced.
Can tablet maximum width affect mobile?
In some cases, yes.
That is why you should always check the mobile version after changing width or maximum width.
What causes the most problems on mobile?
The most common problems are images that are too large, sliders with the wrong height, cut off iframes, misaligned buttons, and poor spacing.
How do I know if the spacing is good?
The content should not be stuck to the edges or too far away from other elements.
It should feel comfortable to read and navigate.
Can I use the same desktop image on mobile?
You can, but it is not always ideal.
If the image has too many details, small text, or a very horizontal format, it may be better to use a more mobile friendly image.
Why does my banner look good on desktop but bad on mobile?
Because the screen format changes.
Desktop is wide.
Mobile is narrow.
Horizontal banners often need to be adapted for mobile.
Why does my iframe not look good on mobile?
It may be caused by height, width, or the external content itself.
If the embedded content is not responsive, adjusting it inside Builderall may not fully fix the problem.
Do I need to test on a real phone?
Yes.
The editor helps a lot, but the final test should be done on a real phone.
After adjusting, do I need to publish?
Yes.
The changes need to be published before they appear on the live page.
33. Final summary for beginners
The mobile version is the version of your page that appears on a phone.
It needs to be reviewed separately because a phone screen is smaller and elements behave differently.
In Builderall Builder, mobile adjustments are made directly on each element.
For images, adjust width, maximum width, and spacing.
For galleries, sliders, and rotating banners, pay close attention to minimum height.
For iframes, check minimum height, minimum width, and side spacing.
Always test the full page from top to bottom.
After adjusting, publish the page and open it on a real phone.
The main rule is simple:
Adjust one element at a time.
Test on mobile.
Publish.
Check on a real phone.