mikeill

Nudge – any developments on this thread?

Thanks, Jeremy. Even without the padding the x in a circle looks slightly different on different platforms; on my mobile phone the X is in the upper half, on firefox slightly lower and around dead center in chrome.

as is, the padding numbers posted above are way off from the center and squaring out the circle.

may experiment more. it looks like there may be some combination of padding and font size that will create exactly what i’m looking for.

Thank you both for this useful post.

I have been trying to change the “x” that closes the carousel to make more intuitive and so far have come up with using css to create a circle around the X to make it look more like a button.

The problem is that I haven’t found a way to exactly align the X in the center of the span.

.jp-carousel-light .jp-carousel-close-hint span {
    background-color: white;
    border: 3px solid #991414;
    color: #991414;
    font-size: 55px !important;
    opacity:0.6;
    filter:Alpha(opacity=60);
}

.jp-carousel-close-hint span:hover {
    opacity:0.6;
    filter:Alpha(opacity=60);
 }   

.jp-carousel-close-hint span {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 35px;
    cursor: pointer;
    display: block;
    font: 400 64px/1 "Helvetica Neue",sans-serif !important;
    height: 64px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    transition: border-color 200ms linear 0s;
    width: 64px;
}