0

I have created a simple user-controlled carousel, but with each scroll the currently-displayed section comes out of alignment by about 4.5px.

It works by collecting all the direct ancestor <section> tags inside the parent container it has hooked onto, setting display: inline-block on each <section> and making the width of each <section> the same.

The scrolling is achieved by setting the <section> container's margin-left property to negative N * W, where N is the number of <section> tags scrolled and W is the width of each <section>.

The padding and margin properties of the <section> tags and the container have been set to 0.

What could be causing this?

JSFiddle: https://jsfiddle.net/835kxb2w/ - I have added borders to the <section> tags to make the issue more apparent.

Also, in what I think is a related issue (to do with whitespace leftover from templates?), the last section breaks onto a new line. This is despite the <section> container being the exactly N * W pixels wide.

Thanks

JmJ
  • 1,989
  • 3
  • 29
  • 51
  • `inline-block` will render any spaces between your tags as spaces on the page, line-breaks included. You can avoid this by using `float` instead, by removing any spaces/line-breaks in your code, or by wrapping it in a container with `font-size: 0px;` – Tyler Roper Dec 16 '16 at 19:45

1 Answers1

0

Add font-size: 0; to the .profileService_profileDescriptors class (and remove the border style from .beautySection).

Reasoning here

Community
  • 1
  • 1
Joseph Webber
  • 2,010
  • 1
  • 19
  • 38