Jeremy Zauder
asked 8 years ago

We’d like to have a three-column slider in the Home Content area. Normally, the News Carousel widget is 4 columns and only works properly in the Bottom area. Is there a way to modify this widget to make it 3 columns and work in the Home Content? We tried putting the widget in Home Content, and it becomes 3 columns and looks fine except for an additional linked “0” or “1” in a <ul></ul> below the slider. Is there a way to get rid of that <ul> if we put it in the Home Content? Or any other ideas to make a 3-column slider in the Home Content? Thank you.

1 Answers
answered 8 years ago

If you want to display the carousel widget in the Home content. After add the carousel widget to the Home Content section, below is our instruction:
Firstly, follow the jetpack’s guideline in the Blog article on how to use Edit CSS here.
Then add the code to the Edit Css.

.home #primary  .carousel {
    padding: 30px 0
.home #primary  .carousel .carousel-inner {
    border-bottom: 1px solid #ddd
.home #primary  .carousel .carousel-control {
    z-index: 1;
    top: auto;
    bottom: -2px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    font-size: 8px;
    line-height: 22px;
    color: #111;
    background: transparent;
    opacity: 1;
    filter: alpha(opacity=100)
.home #primary  .carousel .carousel-control:hover {
    border-color: #111
.home #primary  .carousel .carousel-control.right {
    left: auto;
    right: 0
.home #primary  .carousel .carousel-nav {
    bottom: 5px;
    margin: 0 auto;
    position: absolute;
    width: 100%
.home #primary  .carousel .carousel-nav ul {
    margin: 0 0 -2px;
    list-style: none;
    text-align: center
.home #primary  .carousel .carousel-nav li {
    display: inline-block;
    width: 12px;
    height: 12px;
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 20px;
    line-height: 2px;
    overflow: hidden;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
.chrome .home #primary  .carousel .carousel-nav li, .safari #bottom .carousel .carousel-nav li {
    padding-top: 1px
.ie8 .home #primary  .carousel .carousel-nav li {
    margin: 2px
.home #primary  .carousel .carousel-nav li a {
    display: inline-block;
    text-indent: -9999px;
    width: 4px;
    height: 4px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -2px 0 0 -2px
.home #primary  .carousel .carousel-nav li:hover a {
    background: #aaa;
    cursor: pointer
.home #primary  .carousel .carousel-nav a {
    background: #111
.home #primary  .carousel .hentry {
    padding-bottom: 30px
.home #primary  .carousel .hentry:before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ddd;
    margin-left: -20px
.home #primary  .carousel .hentry:first-child:before {
    display: none
.home #primary  .carousel .hentry .entry-thumbnail {
    position: relative
.home #primary .carousel .hentry .entry-title {
    text-align: center
.home #primary  .carousel .hentry .entry-title a {
    display: block
.home #primary  .carousel .hentry .entry-meta {
    text-align: center;
    font-size: 11px
@media (max-width:767px) {
.home #primary .dw_focus_videos img {
        width: 100%
@media (min-width:980px) and (max-width:1079px) {
.home #primary .carousel .hentry:before {
        margin-left: -15px

Please note that whenever you start adding the code above and add DW Focus: News Carousel widget, you can not use DW Focus: Slider widget in Home Content section and DW Focus: New Carousel at the same time. 

Jeremy Zauder
replied 8 years ago

Thank you for the answer. We will try it and let you know how it goes.

Powered by DW Question & Answer Pro