Purpose

This article describes the method used in the Alicia Pilates project to achieve the column structure described in the title. By default, the fullwidth section column width vary according to the screen width. It is impossible to have any of the columns align with the page grid.

The method here is to add an inner section to the left column to house the elements of the left column. Set the width of the inner section to the required content width. Then calculate the column width of the outer column such that when the inner section is pushed to the end (justify-item: flex-end), the inner section can align with the left side of the grid.

Approach

• Install the Happy Addons plugin. This allows setting the column width in terms of pixel, % or calculation. The original column width input box should be left untouched otherwise it won’t work.
• Configure the section to have this structure:
  • section (fullwidth)
    • column (left or C1)
      • inner section (boxed)
        • column
          • various elements
    • column (right or C2)
      • various elements
• Set the left column horizontal alignment to END.

• Assume the followings:
  • ELW = widest element in C1
  • IPL = inner section column padding left (default = 10px)
  • IPR = inner section column padding right (usually set it to 0)
  • SPR = section column padding right (default = 10px)
  • RCW = required content width = IPL + ELW + IPR + SPR
  • GRD = grid size of the page
  • LEN = the length between screen edge and the grid
• It is obvious that 100vw = GRD + 2LEN, hence LEN = 50vw – GRD/2
• Therefore, to have the elements in C1 in grid, the width of C1 = LEN + RCW
  • C1 = 50vw – GRD/2 + IPL + ELW + IPR + SPR
  • C2 = 100vw – C1
• Input C1 formula to the Happy Addon column width of left column
  • This formula is applied to div.elementor-element-someID.elementor-column
• Input C2 formula to the Happy Addon column width of right column
  • This formula is applied to div.elementor-element-someID.elementor-column
• Set inner section width (note: not column) to RCW-SPR in custom CSS
  • selector { width: RCW-SPR }
• Set inner section column width to 100%
• Set inner section column padding to 0 IPR 0 IPL