Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Feb 18

I would like to add black lines to my grid so they adjust responsively, how would I do this?


Screenshot 2021-02-18 at 15.50.37
.png
Download PNG • 178KB

Screenshot 2021-02-18 at 15.53.48
.png
Download PNG • 96KB

1 answer0 replies
1
Feb 19Edited: Feb 19
  1. Add your horizontal and vertical lines inside the grid –doesn't matter where exactly for now, just inside the grid– dragging them from the Add Panel (+). Make sure to add horizontal lines and vertical lines –for obvious as it may seem– instead of just one type and turning either of them 90° to switch (because results aren't as easy).

  2. Dock your horizontal lines up and your vertical lines left.

  3. Resize them: you can do either

  4. Stretch them to dock them fully, or

  5. Set their width (for horizontal) or height (for vertical) to 100%

  6. Make sure they have zero margins to every dock direction. You'll want your grid lines adjusted as follows:


GRID AREA
    COLUMN    ROW
    1    5    2    3    Horz Line 1
    1    5    3    4    Horz Line 2
    1    5    4    5    Horz Line 3
    
    2    3    1    4    Vert Line 1
    3    4    1    4    Vert Line 2
    4    5    1    4    Vert Line 3

*Note: this ain't no Velo code –so don't u dare even opening the DevMode for this– but a way I've came up to sort of write a table here

Listen, don't... take this the wrong way, but this is very basic knowledge to have in order to start working with EditorX; so I'm assuming you're new here (nvm me if i'm wrong). It's alright, it can be a bit intimidating at first since it's very different from the classic WiX editor's structure; but I do recommend you to check the AcademyX first and check for some lessons as for to work with Grids and Dockings, for it'll bump up your speed and your confindence when working with your responsive sites saving you considerable time.

Some considerations before finishing:

  • For the table above, I assumed the (2nd) image shows the entire grid but I'm afraid it only shows just the top part of it, so the vertical lines may show incomplete

  • I'm also not sure if you have set vertical GAPS for the grid or they are just additional smaller rows (tho gaps are most likely), nor do I know the dimensions of those gaps/rows, which –if on the 2nd case– will change your GRID AREA settings for your vertical lines to fill the grid

  • The pink border of your 2nd image drives me to think of a padding, yet your desired lines shown there go up and beyond this possible padding; if that's so, then your lines' margins'll need to be the same module and unit as your padding but negative (p. ej. -20px or -5%)


so... pls try 2 b more specific on your next doubts


Oh, and pls insert images instead of uploading them as ordinary files next time tho (bcs i couldn't download the 1st image and hence possibly my doubts)


Sorry for the so loong answer. Pardon my English as well.

Editor X

Design your boldest creations.