Fix 1px rounding error issue

The issue is the image not being fully closed when set to different viewports.

In the image you can see it open in the middle.

How would that be fixed in the code?

To reproduce issue, click on the red play image which will show the issue I’m trying to fix.

Inside of JSitor you are able to set it to different viewports to see the issue.

To test code, press Run not update

The issue is able to be viewed in all viewports except for full.

Does anyone know how that would be fixed so that the image is fully closed?

.panel-right {
  position: absolute;
  height: 100%;
  width: 50%;

I can’t reproduce the issue on my machine, sorry.

When set to iPhone 6+/7+/8+ (414 x 736)

You’re not able to see that the image is not fully closed?

There’s a 1px space in the middle of the image.

That’s no rounding error. Your squares have a fixed with of 165px. If the viewport is 360px wide, then 360/165 = 2.18 squares fit into that. For a viewport of 2 x 165px = 330px, you’d get two whole squares.

How to fix it? I guess it would be possible to make the squares responsive by using percentage values everywhere instead of px, but to test that, I’d have to re-code that whole thing, including 30 lines of linear gradients with fixed px values, and fixed px values on countless other containers. Which is a CSS nightmare that I’m not willing to dive into.

The image should be fully together.

I can delete the squares.

Squares Removed: Image is not fully together.

That’s just a violet background. I don’t understand what you mean by “image fully together”. What image?

The 600 x 360 image. There’s 1px down the middle, you can see through it.

Ok I finally understand what you’re after. But I only see it in the JSitor link, and only in Chrome, so it’s probably an issue with the JSitor preview.

1 Like

You can set different viewports in JSitor, I don’t think you can do that with others.

Why is it important to set different viewports? Will the final project be hosted on JSitor or somewhere else? Does it matter that there’s a little thin line in the middle while you’re developing?

When building code shouldn’t what you are building be designed for all viewports?

You don’t need a special site to do that. You can just narrow your browser. Or you can use the Responsive Design Mode tool in your browser’s dev tools. All these different viewports are just differences in width/height.

1 Like

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