Posts are not aligned to center on smaller screen sizes

Question

I'm trying to convert my wordpress website to responsive. The problem is that the content (also the right sidebar) is not aligned to center on smaller screen size.

Here is some pictures illustrating the problem:

• On regular size
• On smaller size (smartphone)

And the code I'm using:

#casing {
width: 100%;
max-width: 1000px;
padding: 0px 0px 30px 0px;
margin: 0px auto;
}

#content {
width: 100%;
max-width: 700px;
margin-top: 20px;
float: left;
}

#right {
width: 100%;
max-width: 270px;
float: right;
margin-top: 20px;
}

How can i fix that so with any size the content will be centered?

Answer 1

Without having a working example, I would suggest you add the following to your media query for the smaller screen size:

#content,
#right {
  margin: 20px auto 0;
  float: none;
}

My reasoning: the floats are causing problems with your layout on smaller screen sizes.

Update:

The reason your items are grouped in threes is because that's how they are grouped in the code for regular screen sizes.

My suggestion:

1. remove the DIVs responsible for the 3-item-grouping.
2. all items should float: left within the #content (left) DIV.
3. use the #content DIV to center the content on the page.
4. use media queries to control the visual groups by defining when an item should clear: left.

Example for point 4:

@media (max-width:699px){
  #content{
    float: none;
    margin: 20px auto 0;
    width: 480px;
  }
}
@media (max-width:479px){
  .item-class { float: none }
  #content { width: 320px }
}
@media (min-width:480px) and (max-width:699px){
  /* The 1st item of every 2 items in the stack will break the flow */
  .item-class:nth-child(2n+1) { clear: left }
  #content { width: 480px }
}
@media (min-width:700px){
  /* 3-item grouping */
  .item-class:nth-child(3n+1) { clear: left }
}

This is just a rough example to point you in the right direction. It isn't meant to be copy-pasted as a working solution.