Adjusting the padding in a row helps you control the space inside the row, around the content. This can make your content feel more balanced, improve readability, and ensure everything looks well-spaced and aligned. By setting custom padding, you create a cleaner design that fits your brand style and enhances the user experience.
When adjusting padding on your page, it's important to note that desktop and phone views have separate padding settings. This allows you to optimize the design for different screen sizes. You can first set your padding for the desktop view in the Default settings, and once you're satisfied, switch to Phone settings to adjust the padding for mobile devices.
Step 1: Open the padding settings
Click "Add empty row" to start.
Click the gear icon in the top-right corner of the row.
In the menu on the right, click "Margin" to open the margin settings.
Step 2: Adjust the padding for each side (desktop view)
Alternative 1: Use predefined padding options (desktop view)
Alternative 1: Use predefined padding options (desktop view)
You can quickly control the overall look of your page using predefined padding options:
None: No padding applied (no space inside the row).
A little: Adds a small padding inside the row.
A bit more: Adds moderate padding inside the row.
Top and bottom: Adds a larger padding to the top and bottom of the row.
Spacious: Adds a large padding inside all sides of the row.
Alternative 2: Set custom padding (desktop view)
Alternative 2: Set custom padding (desktop view)
If you prefer more control, you can manually adjust the padding values.
For example:
Top: Enter 200 to create more space inside at the top.
Right: Enter 8 to create a small space inside on the right side.
Bottom: Enter 8 to add padding at the bottom.
Left: Enter 8 for a small space inside on the left side.
Step 3: Adjust for phone view
Once you're happy with the padding on the desktop version, it's time to adjust for mobile devices:
In the right menu, switch to Phone settings.
You’ll need to repeat the steps for adjusting the padding (as you did in Default settings).
Adjust the top, right, bottom, and left padding for the phone view as needed to make sure the layout looks great on mobile screens.
Step 4: Save your changes
After adjusting the padding for both desktop and phone views, click "Save" in the top-right corner.
Done! Your row will now have the padding you set for both desktop and phone, making your page more visually appealing and well-structured for any device.
Summary
Remember that desktop and mobile views have separate padding settings. First, adjust your padding for the desktop view in Default settings, then switch to Phone settings to make adjustments for the mobile layout. This ensures your page looks great and is properly aligned on all devices.
We hope this article has helped you understand how to adjust the padding in a row on your page. If you have any further questions, please don't hesitate to reach out to our customer support team for assistance.