The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Table, img not centered smartphone Reply To: Responsive Table, img not centered smartphone


Hi, Jeff,

You have the following from the css-tricks article:

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;

By setting position:absolute and left:6px, you are forcing your table elements to show up 6 pixels from the left of their container. In the tutorial, this is what he wants: he uses padding-left:50% on the td to make the content start at the center, and pushes the title in on the left with absolute positioning. You don’t want that.

If that’s not enough to make things clear, create a codepen with just the bottom table, and I’ll edit it to fix the problem.