Responsive design and center floated containers

HTML & CSS
1

I just completed the learnable course for responsive design and have my first page sort of working. What I can’t figure out how to do is when there are more then one column, the containers (300px wide) do not center. I tried sever things and googled and none seem to work. So how to you get a container of floated containers to center?

Thanks for your help.

2

can you please post your code here, using jsfiddle, or whatever is easiest for you.

3

CSS below, but you can see here lo.m2mc.us This is my test site so you may see some problems.

.col {
    overflow: hidden;
    margin-bottom: 1em;
    min-width: 300px;
}
/* -----------------------------------
medium
----------------------------------- */
@media (min-width: 842px) and (max-width: 1050px) {
    .col {
        float: left;
        margin-right: 4%;
        min-height: 300px;
    }
    .m-2col {
        width: 100%;
    }
    .m-1col {
        background-color: red;
        width:48%;
    }
}

/* -----------------------------------
wide
----------------------------------- */

@media (min-width: 1050px) {
    .col {
        float: left;
        min-height: 300px;
        margin-right: 2%;
    }
    .w-4col {
        width: 100%;
    }
    .w-3col {
        width: 74.5%;
    }
    .w-2col {
        width: 49%;
    }
    .w-1col {
        width: 23.5%;
    }
}

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

4

What’s the HTML to go along with that? Generally containers (that have a width set) can just have margin:auto; set on it and it will center. Easy as that.

5

in your css, try this

.main-list-container {
  display: block;
  margin: 0 auto;
}
.main-list-container-fixer {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
}
.col {
  display: inline-block;
  vertical-align: top;
  width: 49%;
  margin: 0 1em;
}

This will allow you to center your items in the page, and all you have to increase or decrease the width of .col in each media query depending on your layout.

I started with your @media (min-width: 842px) so you should be able to go smoothly from there

6

That works except the last row with only one container centers as well but might be OK though. It is interesting that float is out of the picture and that is what Learnable taught.

Thanks for your help.

7

If you need to can add a class or if to the individual element and move it. You may want to give your space around each element an height unless you’re going for the Pinterest look. Or another thing you can try is masonry. It’s a really cool framework for layouts

8

Was that a lesson by @Russ_Weakley ?

9

Yes

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.