0

I'm working on this solution in flickity (the js slider)

http://codepen.io/djnutron/pen/jWozOv

Upon inspecting the elements, I'm wondering why it is resizing the div surrounding the image. The image is 1900x850. However, somehow the browser is resizing the surrounding div to 1903x848?

Ive tried adding 

padding 0 , margin 0, border 0

etc to all divs.

The CSS Code is:

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

div.gallery {
    height: 100%
}

* {
    box-sizing: border-box;
}

.innerG {
    background-image: url('http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg');
    height: 100%;
}

.gallery-cell {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 24px;
    background: #EEE;
    margin-right: 10px;
}

The HTML code is

<div class="gallery js-flickity" data-flickity-options='{"setGallerySize": false,"cellAlign": "center","imagesLoaded": true,"lazyLoad": 1, "freeScroll": false,  "wrapAround": true,"autoPlay": 6000,"prevNextButtons": true,"contain" : true,"percentPosition": true,"pageDots": true,"selectedAttraction" : 0.1,"friction": 0.6,"rightToLeft": false,"draggable": true}'
 >
  <div class="gallery-cell">
    <div class="innerG">

      <img src="http://lorempixel.com/image_output/animals-q-c-1900-850-2.jpg" />

      asdasdasd
    </div>
  </div>
  <div class="gallery-cell">Lorem ipsum dolor sit</div>
</div>

And it is just calling flickity - http://flickity.metafizzy.co/

From this url - http://flickity.metafizzy.co/flickity.pkgd.js

Is this padding or margin causing this?

Ke.
  • 2,484
  • 8
  • 40
  • 78
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. – Paulie_D Feb 19 '16 at 14:32
  • For some reason the code addition is not working on SO, so I cannot include the actual code - hence the example in codepen – Ke. Feb 19 '16 at 14:33
  • Sounds like whitespace though. Did you set the image to `display:block`? – Paulie_D Feb 19 '16 at 14:33
  • Yep, set the image to display:block, tried vertical-align:top, tried everything - i t just wont budge :/ – Ke. Feb 19 '16 at 14:34
  • 2
    You could stil make a demo that shows the issue...you don't have to replicate the whole slider – Paulie_D Feb 19 '16 at 14:34
  • Im trying to cut and paste the code into SO and it's just turning into normal text (instead of code markup) - ive spent agest trying to get the actual code in the question – Ke. Feb 19 '16 at 14:35
  • 1
    Try a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Feb 19 '16 at 14:36
  • Add your JS to the codepen example. – wuno Feb 19 '16 at 14:40
  • what does this mean "add your js" - all the JS in the codepen example is added. There is no JS other than the library flickity being used - just html to call the relevant classes... – Ke. Feb 19 '16 at 14:43
  • I've added all the code - you only need these things to reproduce the error - its exactly the same as the codepen example - not sure how adding this code here is going to get more answers... – Ke. Feb 19 '16 at 14:47

0 Answers0