sanjihan sanjihan - 1 month ago 7
CSS Question

maintain a fixed width spacer in responsive table

I am almost finished with a table lookalike responsive design. This is a pen to it. The last thing I would like to change is fixed space between

.image
and text on the right in
.right-side
div. Lets say 20px. Currently the text on the right invades the space of image on the left, when the screen size gets smaller. What would be the the best way to have a fixed spacing and maintain responisve design?

Answer

You could change the .wrapper-1 to be a flex container and remove the percentage values of the widths like this for example:

.wrapper-1 {
  padding:10px 10px;
  display:flex
}

.left-side {
  width:70px;
}

.right-side {
  flex:1;
}

http://codepen.io/anon/pen/QGwwEB