Odd 'full-width' image behavior

Thanks for using Tracks!

I know exactly what you mean. This is unfortunately due to how browsers will round the pixels differently. That said, there is a solution I used on the Featured Images that we can reuse here.

Try adding this CSS to your child theme’s style.css file (or the Custom CSS section in the Customizer):

.entry-container {
  overflow: hidden;
}

Next, since you have the code for the “full-width” element, update the width property everywhere it appears like this:

.full-width {
  width: calc(128.6% + 2px);
}

So you have some percentage value plus 2 pixels wrapped in the CSS “calc” function.

What this is going to do is make the content in the “full-width” element 2px wider than usual. This means instead of sometimes leaving a 1px space, it will sometimes be 1px too wide. Since we’ve added overflow: hidden; to the container, this will be stripped off for a clean edge. There won’t ever be line left over now, and no one will notice the 1px that is occassionally missing from the content.

Spot on Ben, worked a champ! My OCD thanks you. Keep up the work on a great theme.

For anyone else who runs into this issue here is, I think, the pertinent CSS snippet that I added via the Customizer:

.entry-container {
  overflow: hidden;
}
.entry-content .full-width {
  position: relative;
  width: calc(113% + 2px);
  left: -6.5%;
}
@media all and (min-width: 43.75em) {
   .entry-content .full-width {
      width: calc(128.6% + 2px);
      left: -14.3%;
   }
}
@media all and (min-width: 56.25em) {
   .entry-content .full-width {
      width: calc(150% + 2px);
      left: -25%;
   }
}
@media all and (min-width: 68.75em) {
   .entry-content .full-width {
      width: calc(163.6% + 2px);
      left: -31.8%;
   }
}
@media all and (min-width: 75em) {
   .entry-content .full-width {
      width: calc(179.9% + 2px);
      left: -39.95%;
   }
}

No problem, thanks for sharing the final code here ??