Support » Plugin: CPT Bootstrap Carousel » inner div

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Phil Ewels

    (@tallphil)

    Short answer is not really. Longer answer is that you could probably fudge it by adding <div> to the before_title settings option and then </div> to the link_button_after settings option.

    Why do you need an additional div?

    Phil

    I am trying to align the caption in a container and to the left (not centered), and I want the button in it as well.

    I tried working with the HTML before_title settings etc, but there seems no way to achieve what I need.

    Plugin Author Phil Ewels

    (@tallphil)

    You can probably do this with pure CSS. It’s difficult without knowing exactly what you want, but a combination of text-align: left and float:left should get you started.

    Let me know if I can be of any further help,

    Phil

    The problem I’m facing is that since the caption is absolutely positioned, if you try any alignment other than centered it won’t be aligned to the main container of the site… because I am using the carousel fullscreen outside of site container and the caption displays at a left/right percentage of the carousel area.

    I can solve this with an extra div because then the container div can have a width set

    I can get it all working like

    <div class="carousel-caption">
    <div class="carousel-caption-inner">
    <a href="#" class="btn btn-default pull-right">Button</a>
    </div>
    </div>

    but I obviously don’t want to edit the plugin. Thanks for your help! The plugin is great by the way.

    Plugin Author Phil Ewels

    (@tallphil)

    Ah ok, I think I see what you mean. It’s not very pretty, but could you do it in CSS using calc() functions?

    Something like this (untested)…

    /* size-lg */
    @media only screen and (min-width: 1200px){
      .carousel-caption {
        margin: 0 calc(50% - 585px);
        width: 1170px;
      }
    }
    /* size-md */
    @media only screen and (min-width: 992px){
      .carousel-caption {
        margin: 0 calc(50% - 485px);
        width: 970px;
      }
    }
    /* size-sm */
    @media only screen and (min-width: 768px){
      .carousel-caption {
        margin: 0 calc(50% - 375px);
        width: 750px;
      }
    }
    Plugin Author Phil Ewels

    (@tallphil)

    ..or even just margin: 0 auto; might work with the fixed widths.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘inner div’ is closed to new replies.