Change column width of row without breaking responsiveness

[sabinder]

Hi guys, I cant figure out a decent way to make sure the margin between my 1/2 columns is the exact same distance as the margin separating it from the row above:

http://aftertheflood.co.routing.yourhost.co/

Here is a screenshot of what I am trying to achieve, but as soon as i make the viewport smaller it breaks the layout as the flex custom css I have written is clashing with your floats. Your tutorial for Sections mentions Flexbox for Rows but I see no such options?

Here is the CSS i am trying now:

.flex-row {
  display: flex;
  margin-top: 14px;
}

.project-columns {
  margin-right: 14px;
  width: auto;
  flex: 1 1 auto;
  flex-wrap: wrap; 
}

Any help would be greatly appreciated, it’s driving me a bit insane!

[basanta]

Hi there,

Thanks for writing in!
To make those sections uniform please follow the bellow points and you no need to add any custom css to manage the gap between the columns.
1- Create the section with margin and padding: if you want to have some space in top or bottom you can add.
Check the screenshot.

2- Create two rows inside the section with the setting as per the screenshot.

3- Add padding 7px to every column of the rows.

4- Then please put your content to the respective columns, It will maintain 14px gap in each side of the columns if you want more gap than 14px please change the value.

Hope this works for you

Thanks

[sabinder]

I have been clearly sat here way too long! That worked beautifully, thanks so very much. You guys are awesome as usual.

[jade]

You’re most welcome!