Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-103795

To be able to individually configure the padding of top, right, left, and bottom for each breakpoint


    • Type: Feature Request
    • Status: Closed
    • Priority: Minor
    • Resolution: Implemented in Platform
    • Affects Version/s: DXP SP1
    • Fix Version/s: None
    • Component/s: Pages > Page Editor
    • Labels:



      In Section Builder, We want the ability to configure the padding top, left, right and bottom side for each breakpoints.


      1. Login as Administrator (Username : [email protected], Password : test)
      2. Open Site Builder -> Pages
      3. Click Add
      4. Create new Content Page, populate page name (arbital), and click Add
      5. See the right bar where there are several buttons, click Section Builder
      6. Once Section Builder is shown, Click Layouts to open several Layout for Section Builder
      7. Select Three Column Section Layout, then Drag it to the Page
      8. Click within the area of the Section that just has been added, there are three Icons that will be displayed on the bottom right of the Section area, click the Spacing icon (the on at the very right)
      9. Once clicked, details of the Spacing options for that Section will be displayed.

      Actual result: 

      There is no Padding option for each side (Top, Bottom, Left and Right) of each breakpoint. You can only configure Padding V and Padding H that are commonly used for all of breakpoints.

      Expected result: 

      There’s an option to set Padding option for Top, Bottom, Left and Right of the Section, and also available for each Breakpoint.

      Use Case for Improvement: 

      As a marketer or a designer, wants to adjust padding according to the size of devices, for example, mobile, tablet and PC. In most cases, the appropriate padding differ according to the size of the device, not only for Vertical and Horizontal, but also top, bottom, left and right, same as CSS classes of Bootstrap like .pt-5, .pt-md-4, .pt-lg-3, .pt-xl-2..


          Issue Links



              support-lep@liferay.com SE Support
              johanes.rulistianto Johanes Christian Rulistianto
              0 Vote for this issue
              3 Start watching this issue




                  Version Package