Streaming live at 10am (PST)

Designing for Responsive: Positioning Elements

Hi, I am trying to reposition these squares on my homepage for mobile. They are link blocks that I’ve arranging. In the desktop version, they’re four rectangles in a grid of 2 x 2, but for mobile I’d like to stack each rectangle on top of each other vertically due to size constraints.

However - I’m having trouble positioning the squares and the vertical spacing between each element is inconsistent. Here is a screenshot to show what I mean:

Right now I’ve been changing the “position” of each element individually in the editor, but I’m not sure how to get the spacing consistent between each rectangle.

Any thoughts, insights, or advice would be much appreciated!

Here is my site’s read-only link.

Hello Laura,

I’ve tried to access the read-only link but can’t find the page with the incriminated grid.

If you can give me the page and the section I will take a look.

Hi Michele - sorry about that, I should have mentioned that before! The grid is on the home page, and is a grid of 4 white rectangles in a 2 x 2 formation. If look at the home page grid on the mobile portrait view and see the positioning it looks good in the preview - but not when actually viewed on mobile :frowning:

Thanks for the info.

Here there are a couple of things:
You are not using properly speaking the grid layout and as the structure is right now you would not be able to take advantage of it because two boxes are nested in a parent and the others are not.

Without using a grid or flex display the faster way to fix it is to modify those things:

  • Actually all your boxes are display:inline, move them to display:block
  • Remove all the positions in Relative (basically you could as well change from relative to static in case you are not thinking about adding children with position:absolute or relative in those boxes)
  • Remove also inconsistent margins and padding (like in “Link Block 6”)

Those things should put you back on the right track.

Also as an extra tip:
Your “Home Header” element on mobile has a fixed width of 1218vw (outch!), this create a page larger than the viewport and doesn’t allow you to center elements with margin auto on both sides.
Try to change all the values of the elements that goes out of your viewport like this one and you will prevent some graphic bugs from happening and make your life easier :wink: